@outbook/webcomponents-button-color-scheme
v1.1.2
Published
Web components button-color-scheme
Readme
@outbook/webcomponents-button-color-scheme
This package provides a web component for a button that toggles between light and dark color schemes.
Installation
npm install @outbook/webcomponents-button-color-schemeUsage
As a Lit Element
import {html} from 'lit';
import {ButtonColorScheme} from '@outbook/webcomponents-button-color-scheme';
function render() {
return html`
${ButtonColorScheme({
textVisibility: 'visible',
size: 'M'
})}
`;
}Direct HTML Usage
You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined. Also, for the component to work, you must instantiate LuminMystic and pass it as a property. It is simpler to use the Lit Element wrapper function.
import '@outbook/webcomponents-button-color-scheme';
import { LuminMystic } from '@outbook/lumin-mystic';
const themeManager = new LuminMystic({
classDark: 'is-dark',
classLight: 'is-light',
storageContext: 'session'
});
const button = document.querySelector('outbook-button-color-scheme');
button.themeManager = themeManager;<outbook-button-color-scheme text-visibility="visible" size="M"></outbook-button-color-scheme>Component Usage
The component is best used via its wrapper function ButtonColorScheme, which simplifies the creation and management of the theme manager.
Properties
The properties listed below are used by the ButtonColorScheme wrapper function. Some of these are also reflected as attributes on the outbook-button-color-scheme custom element.
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| class | extraClasses | String | undefined | Classes to add to the host element. |
| size | size | String | 'auto' | The size of the button. Can be 'auto', 'XS', 'S', 'M', or 'L'. |
| text-visibility| textVisibility | String | 'label' | Controls the visibility of the descriptive text. Can be 'label' (accessible only) or 'visible'. |
| lang | lang | String | 'en' | The language to use for internationalization. |
| - | classDark | String | 'is-dark' | The CSS class to apply to the <html> element for dark mode. |
| - | classLight | String | 'is-light' | The CSS class to apply to the <html> element for light mode. |
| - | storageContext | String | 'session' | The storage to use for persisting the theme ('session' or 'local'). |
Styling
This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.
Custom Properties
Can be used with css light-dark function.
| Custom Property | Description |
|---|---|
| --outbook-button-color-scheme--color | The color of the icon and text. |
| --outbook-button-color-scheme--color-hover | The color of the icon and text on hover. |
License
This component is licensed under the Apache-2.0 License.