网络组件的任意点控制状态混合器

一组将控制状态反映为属性和/或属性的组件. 它可以根据用户输入来控制一个控制的行为.

包含控制 :

• hoverable-mixin.js - 反映鼠标状态的混合 hovered 属性.
• button-state-mixin.js - 反映按钮状态的混合 active, (中文(简体) ), pressed, (中文(简体) ), pointerDown,或 receivedFocusFromKeyboard。 。 。 .
• control-state-mixin.js - 混合反应 focused 状态和交接 disabled 控制状态.

它们旨在处理各种状态组合中的aria属性和状态管理. 用于设计自定义按钮和其他接受用户输入的形式元素.

使用量

安装

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

在一个LitElement中

import { LitElement, html } from 'lit-element';
import { ButtonStateMixin, ControlStateMixin } from '@anypoint-web-components/anypoint-control-mixins';

class SimpleButton extends ControlStateMixin(ButtonStateMixin(LitElement)) {
  static get styles() {
    return css`
    :host {
      display: inline-block;
      background-color: #4285F4;
      color: #fff;
      min-height: 8px;
      min-width: 8px;
      padding: 16px;
      text-transform: uppercase;
      border-radius: 3px;
      user-select: none;
      cursor: pointer;
    }

    :host([disabled]) {
      opacity: 0.3;
      pointer-events: none;
    }

    :host([active]),
    :host([pressed]) {
      background-color: #3367D6;
      box-shadow: inset 0 3px 5px rgba(0,0,0,.2);
    }

    :host([focused]) {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                  0  6px 30px 5px rgba(0, 0, 0, 0.12),
                  0  8px 10px -5px rgba(0, 0, 0, 0.4);
    }`;
  }

  render() {
    return html`<slot></slot>`;
  }
}
window.customElements.define('simple-button', SimpleButton);

发展

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

本地运行演示

npm start

运行测试

npm test