折旧

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

====

任意点和材料设计按键.

默认情况下任意点按钮为任意点平台的样式. 样式可以通过使用 emphasis 属性 ans CSS 变量.

emphasis 可以成为其中之一 low, (中文(简体) ), middle,或 high。可以使用 CSS 变量重新定义每种样式. 低强调按钮应用于不太重要的行动. 次要行动应有中度强调. 首要行动应受到高度重视,而不是经常,最好是每屏一次.

使用量

安装

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

在 HTML 文档中

<script type="module" src="@anypoint-web-components/anypoint-button/anypoint-button.js"></script>
<script type="module" src="@anypoint-web-components/anypoint-button/anypoint-icon-button.js"></script>

<anypoint-button emphasis="low">Low emphasis</anypoint-button>
<anypoint-button emphasis="medium">Medium emphasis</anypoint-button>
<anypoint-button emphasis="high">High emphasis</anypoint-button>
<anypoint-button toggles>Button that toggles</anypoint-button>
<anypoint-button disabled>You can't click me</anypoint-button>

<anypoint-icon-button emphasis="low">
  <my-icon icon="alarm-add"></my-icon>
</anypoint-icon-button>

在一个LitElement中

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

class SimpleElement extends LitElement {
  render() {
    return html`
    <anypoint-button emphasis="low">Low emphasis</anypoint-button>
    <anypoint-button emphasis="medium">Medium emphasis</anypoint-button>
    <anypoint-button emphasis="high">High emphasis</anypoint-button>
    <anypoint-button toggles>Button that toggles</anypoint-button>
    <anypoint-button disabled>You can't click me</anypoint-button>

    <anypoint-icon-button emphasis="low">
      <my-icon icon="alarm-add"></my-icon>
    </anypoint-icon-button>
    `;
  }
}
window.customElements.define('simple-element', SimpleElement);

发展

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

本地运行演示

npm start

运行测试

npm test