ea-ui

Tabs 标签页 ​

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

引入 ​

js

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

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

TIP

建议给 ea-tabs 设置最小高度，避免某些情况下出现页面抖动。

css
ea-tabs::part(pane-wrap) {
  min-height: 10rem;
}

基础用法 ​

基础的、简洁的标签页。

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

用户管理配置管理角色管理定时任务补偿
用户管理配置管理角色管理定时任务补偿
查看代码
html
<div class="demo">
  <ea-tabs id="clickEvent--normal-card" actived="second">
    <ea-tab name="first">用户管理</ea-tab>
    <ea-tab name="second">配置管理</ea-tab>
    <ea-tab name="third">角色管理</ea-tab>
    <ea-tab name="fourth">定时任务补偿</ea-tab>
    <div slot="pane">
      <ea-pane class="tab-page" name="first">用户管理</ea-pane>
      <ea-pane class="tab-page" name="second">配置管理</ea-pane>
      <ea-pane class="tab-page" name="third">角色管理</ea-pane>
      <ea-pane class="tab-page" name="fourth">定时任务补偿</ea-pane>
    </div>
  </ea-tabs>
</div>

选项卡样式 ​

选项卡样式的标签页。

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

用户管理配置管理角色管理定时任务补偿
用户管理配置管理角色管理定时任务补偿
查看代码
html
<div class="demo">
  <ea-tabs id="clickEvent--card" actived="second" type="card">
    <ea-tab name="first">用户管理</ea-tab>
    <ea-tab name="second">配置管理</ea-tab>
    <ea-tab name="third">角色管理</ea-tab>
    <ea-tab name="fourth">定时任务补偿</ea-tab>
    <div slot="pane">
      <ea-pane class="tab-page" name="first">用户管理</ea-pane>
      <ea-pane class="tab-page" name="second">配置管理</ea-pane>
      <ea-pane class="tab-page" name="third">角色管理</ea-pane>
      <ea-pane class="tab-page" name="fourth">定时任务补偿</ea-pane>
    </div>
  </ea-tabs>
</div>

卡片化 ​

卡片化的标签页。

将 type 设置为 border-card。

用户管理配置管理角色管理定时任务补偿
用户管理配置管理角色管理定时任务补偿
查看代码
html
<ea-tabs id="clickEvent--border-card" actived="second" type="border-card">
  <ea-tab name="first">用户管理</ea-tab>
  <ea-tab name="second">配置管理</ea-tab>
  <ea-tab name="third">角色管理</ea-tab>
  <ea-tab name="fourth">定时任务补偿</ea-tab>

  <div slot="pane">
    <ea-pane class="tab-page" name="first">用户管理</ea-pane>
    <ea-pane class="tab-page" name="second">配置管理</ea-pane>
    <ea-pane class="tab-page" name="third">角色管理</ea-pane>
    <ea-pane class="tab-page" name="fourth">定时任务补偿</ea-pane>
  </div>
</ea-tabs>

动态增减标签页 ​

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

添加标签页 用户管理 配置管理角色管理定时任务补偿
用户管理配置管理角色管理定时任务补偿
查看代码 html
html
<div class="demo">
  <ea-tabs id="clickEvent--normal-card" actived="second">
    <ea-tab name="first">
      <ea-icon icon="icon-coffee"></ea-icon>
      用户管理
    </ea-tab>
    <ea-tab name="second">配置管理</ea-tab>
    <ea-tab name="third">角色管理</ea-tab>
    <ea-tab name="fourth">定时任务补偿</ea-tab>
    <div slot="pane">
      <ea-pane class="tab-page" name="first">用户管理</ea-pane>
      <ea-pane class="tab-page" name="second">配置管理</ea-pane>
      <ea-pane class="tab-page" name="third">角色管理</ea-pane>
      <ea-pane class="tab-page" name="fourth">定时任务补偿</ea-pane>
    </div>
  </ea-tabs>
</div>
查看代码 js
js
const editableObj = {
  wrap: document.querySelector("#editable"),
  paneSlot: document.querySelector("#editableSlot"),
  addBtn: document.querySelector("#addBtn"),

  handleTabclose(wrap) {
    wrap.addEventListener("tab-close", (e) => {
      console.log("close", e.detail);
    });
  },

  handleTabAdd(btn, wrap, slotWrap) {
    btn.addEventListener("click", () => {
      const tab = document.createElement("ea-tab");
      tab.innerText = "新增标签";

      const pane = document.createElement("ea-pane");
      pane.innerText = "新增标签内容";

      wrap.appendChild(tab);
      slotWrap.appendChild(pane);
    });

    wrap.addEventListener("tab-add", (e) => {
      console.log("add", e.detail);
    });
  },

  init() {
    this.handleTabclose(this.wrap);
    this.handleTabAdd(this.addBtn, this.wrap, this.paneSlot);
  },
};

editableObj.init();

Tabs Attributes ​

参数说明类型可选值默认值
actived默认激活的标签页String--
type标签页类型Stringnormal/border-card/cardnormal
editable是否可删除标签页Boolean-false

Tab Attributes ​

参数说明类型可选值默认值
name标签页唯一标识String-该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'

Pane Attributes ​

参数说明类型可选值默认值
name标签页名称唯一标识String-该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'

Tabs CSS Part ​

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

名称说明
container外层容器
tab-wrap标签页容器
tab-bottom-bar标签页底部的移动线
pane-wrap内容容器

Tab CSS Part ​

名称说明
container外层容器

Pane CSS Part ​

名称说明
container外层容器

Tabs Events ​

事件名说明回调参数
tab-add标签页增加event.detail
tab-close标签页关闭event.detail
tab-click标签页点击event.detail

Tabs Slot ​

名称说明
pane标签页内容