Salesforce Docs Portal

Tabset Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Tabset LWC ReadMe for each Vlocity release.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Vlocity Insurance and Health Summer '20

The Tabset Lightning Web Component displays a tabbed container with multiple content areas, only one of which is visible at a time. A tabset can hold multiple c-tab components. The first tab is activated by default.

Available c-tabset Attributes

Attribute

Value

Type

Required

Description

active-tab-value

tab index

string

  

Specifies which tab is active by default. use the position (index) of a c-tabcomponent. By default, the first tab is active.

hideTabNav

true, false (Default: false)

boolean

  

To hide the tab navigation bar, set to true.

theme

slds, nds (Default: slds)

    

Sets the theme for the tabset component.

variant

standard, scoped, vertical, default (Default: default)

    

Sets the appearance of the tabset.

Available Event Listeners

ontabchange

Triggers when the tab is changed, it returns the tabIndex and tab-id, if tab-id is passed on c-tab, if tab-id is not specified only tabIndex will be returned as result.

Example c-styles Component


<!-- When using the index positon as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="1">
    <c-tab title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

<!-- When using the id as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="tabOne">
    <c-tab id="tabOne" title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab id="tabTwo" title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The Tabset Lightning Web Component displays a tabbed container with multiple content areas, only one of which is visible at a time. A tabset can hold multiple c-tab components. The first tab is activated by default.

Available c-tabset Attributes

Attribute

Value

Type

Required

Description

  

active-tab-value

tab index

string

  

Specifies which tab is active by default. use the position (index) of a c-tab component. By default, the first tab is active.

  

theme

slds, nds (Default: slds)

    

Sets the theme for the tabset component.

  

variant

standard, scoped, vertical, default (Default: default)

    

Sets the appearance of the tabset.

  

Available Event Listeners

ontabchange

Triggers when the tab is changed, it returns the tabIndex and tab-id, if tab-id is passed on c-tab, if tab-id is not specified only tabIndex will be returned as result.

Example c-styles Component

<!-- When using the index positon as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="1">
    <c-tab title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

<!-- When using the id as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="tabOne">
    <c-tab id="tabOne" title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab id="tabTwo" title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The Tabset Lightning Web Component displays a tabbed container with multiple content areas, only one of which is visible at a time. A tabset can hold multiple c-tab components. The first tab is activated by default.

Available c-tabset Attributes

Attribute

Value

Type

Required

Description

  

active-tab-value

tab index or tab id

string

  

Specifies which tab is active by default. Use the id of a c-tab component or use the position (index) of a c-tab component. By default, the first tab is active.

  

theme

slds, nds (Default: slds)

    

Sets the theme for the tabset component.

  

variant

standard, scoped, vertical, default (Default: default)

    

Sets the appearance of the tabset.

  

Example c-styles Component

<!-- When using the index positon as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="1">
    <c-tab title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>

<!-- When using the id as the active-tab-value -->
<c-tabset id="tabTest" class="via-slds" active-tab-value="tabOne">
    <c-tab id="tabOne" title="Item 1">
        <slot name="content">Item Content 1</slot>
    </c-tab>
    <c-tab id="tabTwo" title="Item 2">
        <slot name="content">Item Content 2</slot>
    </c-tab>
</c-tabset>