makeup-switch-element v0.0.2

makeup-switch-element

An HTML custom element (aka Web Component) that represents an ARIA switch.

Example

Markup:

<span id="label1">makeup-switch 1</span>
<makeup-switch labelledby="label1" placeholder="true"></makeup-switch>

Style:

The following custom properties are available:

--switch-background-color-unchecked;
--switch-background-color-checked;
--switch-background-color-disabled;
--switch-foreground-color;

Script:

const MakeupSwitchElement = require('makeup-switch-element');

document.querySelectorAll('makeup-switch').forEach(function(el, i) {
    el.addEventListener('makeup-switch-toggle', function(e) {
        console.log(e.type, e.detail);
    });
});

Attributes

label

The accessible label text. NOTE: labelledby is preferred.

labelledby

The id of the labelling element.

placeholder

Set to true to render a placeholder style while in non-JavaScript state.

Example placeholder style:

makeup-switch[placeholder="true"] {
    align-items: center;
    display: inline-flex;
    height: 40px;
}
makeup-switch[placeholder="true"]::after {
    background-color: #eee;
    border-radius: 400px;
    content: '';
    height: 24px;
    width: 40px;
}

Events

makeup-switch-toggle

Fired when the switch is toggled.

• detail.on: true or false