# makeup-switch-class

> A class representing an ARIA switch

Latest version **0.0.4** (published 2020-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install makeup-switch-class
pnpm add makeup-switch-class
yarn add makeup-switch-class
bun add makeup-switch-class
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2020-04-04 |
| First published | 2020-03-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ian McBurnie |
| Maintainers | ianmcburnie |

## Links

- npm: https://www.npmjs.com/package/makeup-switch-class
- Repository: https://github.com/makeup-ui/makeup-ui/tree/master/packages/makeup-switch-class
- npm.io page: https://npm.io/package/makeup-switch-class

## Dependencies (1)

- [custom-event](https://npm.io/package/custom-event.md) ^1

## Recent versions

- 0.0.4 (latest) — 2020-04-04
- 0.0.3 — 2020-04-04
- 0.0.2 — 2020-04-03
- 0.0.1 — 2020-03-31

## README

# makeup-switch-class

A JavaScript class that represents an ARIA switch. No CSS provided.

## Example

The following markup is required. Classnames are configurable (see config section below).

```html
<span id="label1">makeup-switch 1</span>
<span class="makeup-switch">
  <span class="makeup-switch__control" role="switch" tabindex="0" aria-checked="false" aria-labelledby="label1"></span>
  <span class="makeup-switch__button"></span>
</span>
```

Style:

No CSS is provided. However, the class is fully compatible with [eBay Skin](https://ebay.github.io/skin/#switch).

Script:

```js
const MakeupSwitchClass = require('makeup-switch-class');

document.querySelectorAll('.makeup-switch').forEach(function(el, i) {
    const widget = new MakeupSwitchClass(el, config);

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

## Config

The constructor takes a configuration object as its second parameter.

### customElementMode

Set to true if using the class as the model for a custom element (aka Web Component)

### bem

Use this object to specify your custom classnames (i.e. if you don't wish to use the default `makeup-switch` prefixes).

* `bem.control`: classname for the focusable element (default: `makeup-switch__control`)

## Events

### makeup-switch-toggle

Fired when the switch is toggled.

* `detail.on`: true or false

---
_Source: https://npm.io/package/makeup-switch-class · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._