折旧

此组件已移至 anypoint-web-components/awc。 。 。 .

切换打开或关闭单个设置状态 。 它们是调整移动设置的首选方式.

本构成部分以材料设计开关为基础,并调整了Anypoint平台组件.

任意点网络组件是允许在开源项目中构建任意点启用的UI的组件集.

使用量

安装

npm install --save @anypoint-web-components/anypoint-switch

在 html 文件内

<html>
  <head>
    <script type="module">
      import './node_modules/@anypoint-web-components/anypoint-switch/anypoint-switch.js';
    </script>
  </head>
  <body>
    <anypoint-switch>on/of</anypoint-switch>
    <script>
    {
      document.querySelector('anypoint-switch').onchange = () => {
        // ...
      };
    }
    </script>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-switch/anypoint-switch.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <anypoint-switch
      .checked="${this.checked}"
      @change="${this._switchHandler}">on/off</anypoint-switch>
    `;
  }

  _switchHandler(e) {
    this.checked = e.detail.value;
  }
}
customElements.define('sample-element', SampleElement);

发展

git clone https://github.com/anypoint-web-components/anypoint-switch
cd anypoint-switch
npm install

本地运行演示

npm start

运行测试

npm test