折旧

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

====

本部分以"材料设计"文字字段为基础,并被调整为"任意点"平台组件.

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

菜单和列表视图中使用的列表项目 .

<anypoint-item>Item</anypoint-item>

样式选项

该元素有两个内置主题:

• 材料设计 - 默认样式
• 任意点设计 - 通过添加启用 legacy 属性到元素.

OSS应用程序不应使用基于任意点的造型,因为它受到MuleSoft版权的保护. 此属性被保留给嵌入Anypoint平台的OSS应用程序.

使用量

安装

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

在 HTML 文件内

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-item/anypoint-item.js';
    </script>
  </head>
  <body>
    <div role="listbox" slot="content">
      <anypoint-item>
        Option 1
      </anypoint-item>
      <anypoint-item>
        Option 2
      </anypoint-item>
      <anypoint-item>
        Option 3
      </anypoint-item>
      <anypoint-item>
        <p>Paragraph as a child</p>
      </anypoint-item>
    </div>
  </body>
</html>

使用此元素为 <anypoint-item-body> 样式 twoLine 财务报告和审定财务报表 threeLine 页:1.

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-item/anypoint-item.js';
      import '@anypoint-web-components/anypoint-item/anypoint-item-body.js';
    </script>
  </head>
  <body>
    <div role="listbox" slot="content">
      <anypoint-item-body twoline>
        <div>Show your status</div>
        <div secondary>Your status is visible to everyone</div>
      </anypoint-item-body>
      <iron-icon icon="warning"></iron-icon>
    </div>
  </body>
</html>

用于 anypoint-item 作为链接,将其包裹在锚标签上. 自兹 anypoint-item ,您可能想要通过设置标签索引到 -1 来防止锚标接收焦点.

<a href="https://domain.com/project" tabindex="-1">
  <anypoint-item raised>API Project</anypoint-item>
</a>

如果你对性能感兴趣,想使用 anypoint-item 在一个 anypoint-listbox 有很多东西,你可以使用本地的 button 与 anypoint-item 应用类(但您已正确包含共享样式) :

import { LitElement, html, css } from 'lit-element';
import itemStyles from '@anypoint-web-components/anypoint-item/anypoint-item-shared-styles.js';

class SampleElement extends LitElement {
  get styles() {
    return [
      itemStyles,
      css`...`;
    ];
  }

  render() {
    return html`<style>${this.styles}</style>
    <anypoint-listbox>
      <button class="anypoint-item" role="option">Inbox</button>
      <button class="anypoint-item" role="option">Starred</button>
      <button class="anypoint-item" role="option">Sent mail</button>
    </anypoint-listbox>
    `;
  }
}
customElements.define('sample-element', SampleElement);

样式

见 任何点-项目共享样式.js 用于列出 CSS 变量.

无障碍

这个元素 role="listitem" 默认。 视使用情况而定,设置更为合适 role="menuitem", (中文(简体) ), role="menuitemcheckbox" 或者说 role="menuitemradio"。 。 。 .

<anypoint-item role="menuitemcheckbox">
  <anypoint-item-body>
    Show your status
  </anypoint-item-body>
  <paper-checkbox></paper-checkbox>
</anypoint-item>

发展

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

本地运行演示

npm start

运行测试

npm test