spz-tabs 标签页

选项卡切换组件。

布局

container

何时使用

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

代码演示

基本用法

在 spz-tabs 内，我们需要使用 role 来标识特定的元素角色。role 值如下：

值	说明
tabs	标识选项卡的外层盒子元素
tab	标识选择卡元素
data-panel	标识当前选项卡激活时，激活哪个内容面板，值与对应的内容面板 `data-id` 一致
tabpanel	标识内容面板元素
data-id	标识内容面板ID，需要与 `data-panel` 值一一对应

Tab 1
Tab 2
Tab 3

Content of tab 1

Content of tab 2

Content of tab 3

<spz-tabs layout="container">
  <ul role="tabs">
    <li role="tab" data-panel="tab-1">Tab 1</li>
    <li role="tab" data-panel="tab-2">Tab 2</li>
    <li role="tab" data-panel="tab-3">Tab 3</li>
  </ul>

  <div role="tabpanel" data-id="tab-1">Content of tab 1</div>
  <div role="tabpanel" data-id="tab-2">Content of tab 2</div>
  <div role="tabpanel" data-id="tab-3">Content of tab 3</div>
</spz-tabs>

保持选中状态

刷新页面后，选中状态保持为上一次选中的状态。

Tab 1
Tab 2
Tab 3

Content of tab 1

Content of tab 2

Content of tab 3

<spz-tabs layout="container" record-state interact="hover">
  <ul role="tabs">
    <li role="tab" data-panel="tab-1">Tab 1</li>
    <li role="tab" data-panel="tab-2">Tab 2</li>
    <li role="tab" data-panel="tab-3">Tab 3</li>
  </ul>

  <div role="tabpanel" data-id="tab-1">Content of tab 1</div>
  <div role="tabpanel" data-id="tab-2">Content of tab 2</div>
  <div role="tabpanel" data-id="tab-3">Content of tab 3</div>
</spz-tabs>

属性

属性名	说明	类型	默认值	是否必需
interact	触发行为，可选 `click` \| `hover`	string	`click`	否
record-state	如果该属性存在，支持保存当前已选中的选项的记录，刷新当前页面后，选中的内容不变	-	-	否

子元素属性

属性名	说明	类型	默认值	是否必需
active	存在于`tab`和`tabpanel`元素上，表明对应的选项卡和内容处于选中状态	-	-	否

方法

tabChange

激活指定的内容面板。

参数名	说明	类型	是否必需
dataId	对应内容面板的`data-id`属性值	string	是

事件

tabChange

内容面板切换时自动触发。

参数名	说明	类型
panelId	对应内容面板的`data-id`属性值	string