折旧

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

====

任意点和材料 DS 样式复选框.

使用表格

在元素发布时,允许自定义元素被 <form> 要素(形式相关自定义要素正在开展工作. 自定义窗体元素必须与需要以格式注册的自定义元素一起使用. 我们建议使用 铁制。 。 。 .

形式相关自定义要素

此元素支持形式关联自定义元素 spec, 允许使用自定义元素 <form> 财务报告和审定财务报表 <fieldset> 要素。 浏览器可能尚未支持此特性 . 如果启用了 API, 那么窗体元素返回 anypoint-checkbox 实值 form.elements 列出并收集控件的值.

使用量

复选框应使用表格来选择可用的选项之一。 与切换动作选择控件并立即执行系统相关动作的切换按钮不同,一个复选框状态的改变,除了选择一个选项外,不会携带任何其他相关动作. 换句话说,当控制状态的改变会触发UI中的变化时,应该使用开关按钮而不是复选框.

安装

npm i --save @anypoint-web-components/anypoint-checkbox

在 HTML 文档中

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
    </script>
  </head>
  <body>
    <anypoint-checkbox>Regular checkbox</anypoint-checkbox>
    <anypoint-checkbox checked>Checked checkbox</anypoint-checkbox>
    <anypoint-checkbox indeterminate>Indeterminate checkbox</anypoint-checkbox>
    <anypoint-checkbox required>Required checkbox</anypoint-checkbox>
    <anypoint-checkbox disabled>Disabled checkbox</anypoint-checkbox>
  </body>
</html>

在一个LitElement中

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

class SimpleElement extends ControlStateMixin(ButtonStateMixin(LitElement)) {
  render() {
    return html`
    <anypoint-checkbox>Regular checkbox</anypoint-checkbox>
    <anypoint-checkbox checked>Checked checkbox</anypoint-checkbox>
    <anypoint-checkbox indeterminate>Indeterminate checkbox</anypoint-checkbox>
    <anypoint-checkbox required>Required checkbox</anypoint-checkbox>
    <anypoint-checkbox disabled>Disabled checkbox</anypoint-checkbox>
    `;
  }
}
window.customElements.define('simple-element', SimpleElement);

使用自定义表格

npm i --save @polymer/iron-form

<script type="module" src="node_modules/@polymer/iron-form/iron-form.js"></script>
<script type="module" src="node_modules/@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js"></script>
<script type="module" src="node_modules/@anypoint-web-components/anypoint-button/anypoint-button.js"></script>
<iron-form>
  <form>
   <anypoint-checkbox name="subscribe" value="newsletter">Subscribe to our newsletter</anypoint-checkbox>
   <anypoint-checkbox name="terms" value="accepted" checked required>Agree to terms and conditions</anypoint-checkbox>
   <anypoint-checkbox name="disabled" value="noop" disabled>This is never included</anypoint-checkbox>
  </form>
  <anypoint-button id="submit"></anypoint-button>
</iron-form>
<script>
  document.getElementById('submit').addEventListener('click', () => {
    const values = document.querySelector('iron-form').serializeForm();
    console.log(values);
  });
</script>

发展

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

本地运行演示

npm start

运行测试

npm test