任意点选择器
这是港口 铁选取器 与LitElement和ES6类合作,最初由Polymer团队开发.
< 任意点选择器 > , AnypointSelectableMixin, (中文(简体) ), AnypointMultiSelectableMixin
anypoint-selector 是可用于管理可以选择的元素列表的元素.
点击此项目将选择该项目 。 这个 selected 表示所选择的项目.
默认使用项目索引. anypoint-selector函数完全由 AnypointMultiSelectableMixin。 。 。 .
AnypointSelectableMixin 给出选定儿童要素的概念。 默认情况下, 元素将选择其可选择的孩子之一
当一个点击事件被发送到它时.
AnypointSelectableMixin 让你...
- 确定哪些儿童应被视为可以选择的儿童(
selectable, (中文(简体) ), - 获取当前选中的元素( r)
selectedItem)和所有要素 在可选集中(items, (中文(简体) ), - 更改选择( e)
select, (中文(简体) ),selectNext(例如), - 决定如何修改选定的元素以显示其选定的状态(
selectedClass, (中文(简体) ),selectedAttribute, (中文(简体) ),
...除了别的.
AnypointMultiSelectableMixin 包括: AnypointSelectableMixin 以及一个 multi 属性,可设置为 true 以表示该元素可以有多个选定的儿童元素.
它还包括: selectedItems 财务报告和审定财务报表 selectedValues 可选元素及其相应值的数组工作属性(multi 实值 true) - 类似于由以下人士提供的单个项目版本: AnypointSelectableMixin数字 : selectedItem 财务报告和审定财务报表 selected。 。 。 .
该元素没有自己的影子DOM. 项目按原样交付。 该元素还涵盖在另一个自定义元素中使用选择器的情况和 <slot> 以儿童身份通过(例如,在轻度DOM中定义的降入列表。).
使用量
安装
npm install --save @anypoint-web-components/anypoint-selector
在 html 文件内
<html>
<head>
<script type="module">
import '@anypoint-web-components/anypoint-selector/anypoint-selector.js';
</script>
</head>
<body>
<anypoint-selector selected="0">
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</anypoint-selector>
<script>
{
document.querySelector('files-payload-editor').onselect = (e) => {
console.log(e.detail.value);
};
}
</script>
</body>
</html>
在 LitElement 模板中
import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-selector/anypoint-selector.js';
class SampleElement extends LitElement {
render() {
return html`
<anypoint-selector @select="${this._selectedHandler}"></anypoint-selector>
`;
}
_selectedHandler(e) {
console.log('current selection:', e.detail.item);
}
}
customElements.define('sample-element', SampleElement);
发展
git clone https://github.com/anypoint-web-components/anypoint-selector
cd anypoint-selector
npm install
本地运行演示
npm start
运行测试
npm test