任意点标签

本组件以"材料设计"菜单为主,并被调整为"任意点"平台组件.

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

Tabs将内容组织到不同的屏幕,数据集,以及其它交互.

使用量

安装

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

在 HTML 文档中

<script type="module" src="node_modules/@anypoint-web-components/anypoint-tabs/anypoint-tabs.js"></script>
<script type="module" src="node_modules/@anypoint-web-components/anypoint-tabs/anypoint-tab.js"></script>

<anypoint-tabs selected="1">
  <anypoint-tab>Tab one</anypoint-tab>
  <anypoint-tab>Tab two</anypoint-tab>
  <anypoint-tab>Tab three</anypoint-tab>
</anypoint-tabs>

在一个LitElement中

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

class SimpleElement extends ControlStateMixin(ButtonStateMixin(LitElement)) {
  render() {
    return html`
    <anypoint-tabs .selected="${this.selectedTab}" @selected-changed="${this._tabHandler}">
      <anypoint-tab>Tab one</anypoint-tab>
      <anypoint-tab>Tab two</anypoint-tab>
      <anypoint-tab>Tab three</anypoint-tab>
    </anypoint-tabs>
    `;
  }

  _tabHandler(e) {
    this.selectedTab = e.detail.value;
  }
}
window.customElements.define('simple-element', SimpleElement);

样式

任意点标签有两种预定义的样式:

• 材料 - (默认) - 材料设计样式标签
• 兼容性 提供与任意点设计的兼容性

见 标签 用于原理和分页解剖的材料设计文档.

可滚动标签

当标签的位置超过可用位置时, 设置 scrollable 属性以启用滚动.

<div class="width: 320px;">
  <anypoint-tabs selected="0" scrollable>
    <anypoint-tab>Tab one</anypoint-tab>
    <anypoint-tab>Tab two</anypoint-tab>
    <anypoint-tab>Tab three</anypoint-tab>
    <anypoint-tab>Tab four</anypoint-tab>
  </anypoint-tabs>
</div>

适应容器

当 fitContainer 属性设置标签扩展至容器的全部宽度.

<anypoint-tabs selected="0" fitContainer>
  <anypoint-tab>Tab one</anypoint-tab>
  <anypoint-tab>Tab two</anypoint-tab>
  <anypoint-tab>Tab three</anypoint-tab>
  <anypoint-tab>Tab four</anypoint-tab>
</anypoint-tabs>

否则,它们将保持左/右对齐(取决于目录值)

动态内容

当孩子改变时,标签会重新显示.

请注意,当孩子改变时,标签不会改变选择. 你要处理这个 状态取决于您的申请背景.

render() {
  return html`
  <anypoint-tabs>
    <anypoint-tab>Tab one</anypoint-tab>
    ${this.renderTwo ? html`<anypoint-tab>Tab two</anypoint-tab>` : ''}
    <anypoint-tab>Tab three</anypoint-tab>
  </anypoint-tabs>
  `;
}

发展

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

本地运行演示

npm start

运行测试

npm test