Cuttlefish Docs
  • English

    • spz-tabs

    Supported layouts: container

    When to use

    Provide parallel areas to contain and display large blocks of content, keeping the interface tidy.

    Code Demonstration

    Basic Usage

    Within spz-tabs, we need to use role to identify specific element roles. The role values are as follows:

    ValueDescription
    tabsIdentifies the outer box element of the tab
    tabIdentifies the tab element
    data-panelIdentifies which content panel is activated when the current tab is active, the value corresponds to the data-id of the content panel
    tabpanelIdentifies the content panel element
    data-idIdentifies the content panel ID, needs to match the data-panel value
    <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>

    Maintain Selected Status

    After refreshing the page, the selected status remains as it was last time.

    <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>

    Properties

    Property NameDescriptionTypeDefault ValueRequired
    interactTrigger behavior, optional click | hoverstringclickNo
    record-stateIf this property exists, it supports saving the record of the currently selected option, the selected content remains the same after refreshing the current page--No

    Methods

    tabChange

    Activate a specified content panel.

    Parameter NameDescriptionTypeRequired
    dataIdThe data-id property value of the corresponding content panelstringYes

    AI Summary (LLM Ready)

    • Component ID: spz-tabs
    • One-line purpose: Tab switching component.
    • Detected attribute rows: 0
    • Detected method subsections: 1
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: tabChange
    • Top event names: none (needs manual completion)
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/