任意点列表框

这个 anypoint-listbox 执行 Anypoint 平台的可访问选项列表.

<anypoint-listbox>
  <anypoint-item>Item 1</anypoint-item>
  <anypoint-item>Item 2</anypoint-item>
  <anypoint-item>Item 3</anypoint-item>
</anypoint-listbox>

可以通过使用 selected 属性/ 属性 :

<anypoint-listbox selected="1">
  <anypoint-item>Item 1</anypoint-item>
  <anypoint-item>Item 2</anypoint-item>
  <anypoint-item>Item 3</anypoint-item>
</anypoint-listbox>

它可以通过使用 multi 属性/ 属性 :

<anypoint-listbox multi>
  <anypoint-item>Item 1</anypoint-item>
  <anypoint-item>Item 2</anypoint-item>
  <anypoint-item>Item 3</anypoint-item>
</anypoint-listbox>

儿童可以通过任何属性而不是指数来选择:

<anypoint-listbox attrforselected="value" selected="2">
  <anypoint-item value="1">Item 1</anypoint-item>
  <anypoint-item value="2">Item 2</anypoint-item>
  <anypoint-item value="3">Item 3</anypoint-item>
</anypoint-listbox>

您可以通过监听来观察变化 selected-changed 事件或设置 onselected 属性 :

list.onselected = (e) => {
  console.log(e.target.selected);
};
// or
list.addEventListener('selected-changed', (e) => {
  console.log(e.target.selected);
  // also e.detail.value
});

无障碍

<anypoint-listbox> 已经 role="listbox" 默认。 多选择列表框也会有 aria-multiselectable 设置. 它执行密钥绑定,通过列表框以上下箭头键导航,esc以退出列表框,并输入以激活列表框项目. 打入列表框项目的第一个字母也会将其聚焦.

该单位还提供支助 aria-selected 儿童在 useAriaSelected 属性设置。 当实施工作在下述情况下发挥不同的作用时,应使用该工具: aria-selected 需要时间.

<anypoint-listbox role="tablist" useAriaSelected>
  <button role="tab">Tab #1</button>
  <button role="tab">Tab #2</button>
  <button role="tab">Tab #3</button>
</anypoint-listbox>

使用量

安装

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

在 LitElement 模板中

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

class SimpleElement extends LitElement {
  render() {
    const { options, selected } = this;
    return html`
    <anypoint-listbox .selected="${selected}" @selected-changed="${this._selectedHandler}">
    ${options.map((item) => html`<anypoint-item>${item}</anypoint-item>`)}
    </anypoint-listbox>
    `;
  }

  _selectedHandler(e) {
    this.selected = e.target.value;
  }
}
window.customElements.define('simple-element', SimpleElement);

发展

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

本地运行演示

npm start

运行测试

npm test