Cuttlefish Docs
  • 简体中文

    • spz-tabs 标签页

    支持布局: container

    何时使用

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

    代码演示

    基本用法

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

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

    保持选中状态

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

    <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 | hoverstringclick否
    record-state如果该属性存在，支持保存当前已选中的选项的记录，刷新当前页面后，选中的内容不变--否

    子元素属性

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

    方法

    tabChange

    激活指定的内容面板。

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

    事件

    tabChange

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

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

    AI 摘要（LLM Ready）

    • 组件标识：spz-tabs
    • 用途一句话：选项卡切换组件。
    • 可识别属性条目：3
    • 可识别方法小节：1
    • 可识别事件小节：1
    • 关键属性名（Top）：interact、record-state、active
    • 关键方法名（Top）：tabChange
    • 关键事件名（Top）：tabChange
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/