Easy UI

Appearance

Tabs 标签页 ​

分隔内容上有关联但属于不同类别的数据集合。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-tabs.js";
</script>
js
import "easy-component-ui/ea-tabs";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 active 属性来指定当前选中的标签页。

UserConfigRoleTaskUserConfigRoleTask
查看代码
html
<ea-tabs class="basic-tabs-demo">
  <ea-tab panel="first">User</ea-tab>
  <ea-tab panel="second">Config</ea-tab>
  <ea-tab panel="third">Role</ea-tab>
  <ea-tab panel="fourth">Task</ea-tab>

  <ea-tab-panel name="first">User</ea-tab-panel>
  <ea-tab-panel name="second">Config</ea-tab-panel>
  <ea-tab-panel name="third">Role</ea-tab-panel>
  <ea-tab-panel name="fourth">Task</ea-tab-panel>
</ea-tabs>
css
.basic-tabs-demo::part(content) {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

卡片风格的标签 ​

你可以设置具有卡片风格的标签。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

UserConfigRoleTaskUserConfigRoleTask
查看代码
html
<ea-tabs class="basic-tabs-demo" type="card">
  <ea-tab panel="first">User</ea-tab>
  <ea-tab panel="second">Config</ea-tab>
  <ea-tab panel="third">Role</ea-tab>
  <ea-tab panel="fourth">Task</ea-tab>

  <ea-tab-panel name="first">User</ea-tab-panel>
  <ea-tab-panel name="second">Config</ea-tab-panel>
  <ea-tab-panel name="third">Role</ea-tab-panel>
  <ea-tab-panel name="fourth">Task</ea-tab-panel>
</ea-tabs>

带有边框的卡片风格 ​

你还可以设置标签页为带有边框的卡片。

将 type 设置为 border-card。

UserConfigRoleTaskUserConfigRoleTask
查看代码
html
<ea-tabs type="border-card">
  <ea-tab panel="first">User</ea-tab>
  <ea-tab panel="second">Config</ea-tab>
  <ea-tab panel="third">Role</ea-tab>
  <ea-tab panel="fourth">Task</ea-tab>

  <ea-tab-panel name="first">User</ea-tab-panel>
  <ea-tab-panel name="second">Config</ea-tab-panel>
  <ea-tab-panel name="third">Role</ea-tab-panel>
  <ea-tab-panel name="fourth">Task</ea-tab-panel>
</ea-tabs>

标签位置的设置 ​

可以通过 tab-position 设置标签的位置。

标签一共有四个方向的设置 tabPosition="left|right|top|bottom"。

UserConfigRoleTaskUserConfigRoleTask
UserConfigRoleTaskUserConfigRoleTask
UserConfigRoleTaskUserConfigRoleTask

查看代码
html
<ea-segmented name="direction" value="top"></ea-segmented>

<ea-tabs style="height: 200px">
  <ea-tab panel="first">User</ea-tab>
  <ea-tab panel="second">Config</ea-tab>
  <ea-tab panel="third">Role</ea-tab>
  <ea-tab panel="fourth">Task</ea-tab>
  <ea-tab-panel name="first">User</ea-tab-panel>
  <ea-tab-panel name="second">Config</ea-tab-panel>
  <ea-tab-panel name="third">Role</ea-tab-panel>
  <ea-tab-panel name="fourth">Task</ea-tab-panel>
</ea-tabs>
js
const directionExample = {
  selector: document.querySelector("#tabDirectionSegmented"),
  placement: ["top", "right", "bottom", "left"],

  normalTabs: document.querySelector("#directionNormalTabs"),
  cardTabs: document.querySelector("#directionCardTabs"),
  borderCardTabs: document.querySelector("#directionBorderCardTabs"),

  init() {
    const direction = new Proxy(
      { value: "top" },
      {
        set: (target, property, value) => {
          if (property === "value") {
            this.normalTabs.setAttribute("tab-position", value);
            this.cardTabs.setAttribute("tab-position", value);
            this.borderCardTabs.setAttribute("tab-position", value);
          }

          target[property] = value;
          return true;
        },
      }
    );

    this.selector.options = this.placement;

    this.selector.addEventListener("change", e => {
      direction.value = e.detail.value;
    });
  },
};

directionExample.init();

自定义标签页的内容 ​

可以通过具名插槽来实现自定义标签页的内容。

UserConfigRoleTaskUserConfigRoleTask
查看代码
html
<ea-tabs class="basic-tabs-demo" type="border-card">
  <ea-tab panel="first">User</ea-tab>
  <ea-tab panel="second">Config</ea-tab>
  <ea-tab panel="third">Role</ea-tab>
  <ea-tab panel="fourth">Task</ea-tab>

  <ea-tab-panel name="first">User</ea-tab-panel>
  <ea-tab-panel name="second">Config</ea-tab-panel>
  <ea-tab-panel name="third">Role</ea-tab-panel>
  <ea-tab-panel name="fourth">Task</ea-tab-panel>
</ea-tabs>

动态增减标签页 ​

通过设置 editable，标签页可以动态增删。

add tab

UserConfigRoleTaskUserConfigRoleTask
查看代码
html
<ea-button id="editableAddBtn">add tab</ea-button>

<ea-tabs type="card" editable>
  <ea-tab panel="first">User</ea-tab>
  <ea-tab panel="second">Config</ea-tab>
  <ea-tab panel="third" closable="false">Role</ea-tab>
  <ea-tab panel="fourth">Task</ea-tab>

  <ea-tab-panel name="first">User</ea-tab-panel>
  <ea-tab-panel name="second">Config</ea-tab-panel>
  <ea-tab-panel name="third">Role</ea-tab-panel>
  <ea-tab-panel name="fourth">Task</ea-tab-panel>
</ea-tabs>
js
const editableExample = {
  addBtn: document.querySelector("#editableAddBtn"),
  tabs: document.querySelector("#editableTabs"),

  renderTemplate: (panelName, tabName, content) => `
    <ea-tab panel="${panelName}">${tabName}</ea-tab>
    <ea-tab-panel name="${panelName}">${content}</ea-tab-panel>
  `,

  init() {
    const templateEl = document.createElement("template");

    this.addBtn.addEventListener("click", () => {
      const id = Date.now();

      templateEl.innerHTML = this.renderTemplate(
        id,
        "New Tab",
        "New Tab content<br/>" + id
      );

      this.tabs.appendChild(templateEl.content.cloneNode(true));
      this.tabs.setAttribute("active", id);
    });
  },
};
editableExample.init();

Tabs API ​

Tabs Attributes ​

参数说明类型可选值默认值
active当前激活的标签页（panel 名称），可用于设置默认激活项String——
type标签页风格String'' | card | border-card''
editable是否启用可编辑（增删）模式Boolean—false
tabPosition标签栏的位置（水平或垂直）Stringtop / right / bottom / lefttop

Tabs CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
nav标签栏容器
prev上一个标签滚动按钮
next下一个标签滚动按钮
line标签栏下方的连接线
indicator标签栏下方的指示器
content标签栏下方的面板内容

Tabs Events ​

事件名说明回调参数(event.detail)
ea-tab-click点击标签时触发{ name: string, panel: HTMLElement }
ea-tabs-change标签页切换时触发{ name: string }
ea-tab-remove点击删除标签时触发{ name: string }

Tabs Slots ​

名称说明子标签
nav放置标签项的容器（无须手动设置）ea-tab
—默认插槽，用于放置面板子元素（无须手动设置）ea-tab-panel

Tabs CSS Custom Properties ​

属性名说明默认值
--ea-tabs-tab-spacing标签项间距var(--spacing-lg)
--ea-tabs-border-color边框颜色var(--grey-300)
--ea-tabs-nav-height导航栏高度40px
--ea-tabs-border-card-bg-color边框卡片背景颜色var(--grey-100)
--ea-tabs-content-spacing内容区域内边距15px
--ea-tabs-indicator-color指示器颜色var(--blue-500)
--ea-tabs-indicator-size指示器尺寸0
--ea-tabs-indicator-x指示器偏移量0
--ea-tabs-transition过渡动画时长var(--transition-normal)

Tab API ​

Tab Attributes ​

参数说明类型可选值默认值
panel选项卡对应的面板标识，用于与 ea-tab-panel 配对String——
closable是否允许当前标签被关闭（仅在 editable 模式下生效）Boolean—false
disabled是否禁用该标签（不可点击/切换）Boolean—false

Tab CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container单个标签项的外层容器
close-icon关闭图标

Tab Events ​

事件名说明回调参数(event.detail)
ea-tab-close-icon-click点击关闭图标时触发{ panel: string }

Tab CSS Custom Properties ​

属性名说明默认值
--ea-tab-active-color激活状态颜色var(--blue-500)
--ea-tab-disabled-color禁用状态颜色var(--grey-400)
--ea-tab-border-card-bg-color边框卡片背景颜色var(--color-white)

TabPanel API ​

TabPanel Attributes ​

参数说明类型可选值默认值
name面板的唯一标识，用于与 ea-tab 的 panel 配对String——

TabPanel CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container面板内容的外层容器

TabPanel Slot ​

名称说明
—默认插槽，用于放置面板的实际内容