折旧

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

检查元素- 混合

使用 CheckedElementMixin 以执行可以像本地复选框那样检查的元素.

使用量

安装

npm install --save @anypoint-web-components/anypoint-form-mixins

在一个LitElement中

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

class SimpleCheckbox extends CheckedElementMixin(LitElement) {
  static get styles() {
    return css`
    :host {
      display: block;
    }

    :host([invalid]) span {
      color: red;
    }

    #labelText {
      display: inline-block;
      width: 100px;
    }`;
  }

  render() {
    return html`
    <input type="checkbox" id="checkbox" @click="${this._onCheckClick}">
    <span id="labelText">${this.label}</span>
    <paper-button raised @click="${this._onClick}">validate</paper-button>`;
  }

  static get properties() {
    return {
      label: { type: String }
    };
  }

  constructor() {
    super();
    this.label = 'Not validated';
  }

  _onCheckClick(e) {
    this.checked = e.target.checked;
  }

  _onClick() {
    this.validate();
    this.label = this.invalid ? 'is invalid' : 'is valid';
  }
}
window.customElements.define('simple-checkbox', SimpleCheckbox);

发展

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

本地运行演示

npm start

运行测试

npm test