For the managed package runtime, this page contains a Tab LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The Tab Lightning Web Component keeps related content in a single container. The tab content displays when a user clicks the tab. This component is a base element of the c-tabset component.
Available c-tab Attributes
|
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
|
label |
string |
yes |
Sets the visible text for the tab header. |
|
|
title |
string |
Specifies text that displays in a tooltip over the tab content. |
||
|
icon-name |
(Format: utility:down) |
string |
Sets icon for the tab. Must use utility icons only. See Lightning Design System Icons. |
|
|
icon-assistive-text |
string |
Sets the alternative text for the icon specified by icon-name. |
||
|
display-tab |
true, false (Default: true) |
boolean |
To hide the tab title, set to false. |
|
|
tabId |
unique id |
Sets unique id to the tab, if provided this will be returned with the tabchange event result. |
Example c-tab Component
The c-tab is defined as an element inside c-tabset and has its own id so user can update and modify the content directly.
<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-tabs>Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19
The Tab Lightning Web Component keeps related content in a single container. The tab content displays when a user clicks the tab. This component is a base element of the c-tabset component.
Available c-tab Attributes
|
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
|
label |
string |
yes |
Sets the visible text for the tab header. |
|
|
title |
string |
Specifies text that displays in a tooltip over the tab content. |
||
|
icon-name |
(Format: utility:down) |
string |
Sets icon for the tab. Must use utility icons only. See Lightning Design System Icons. |
|
|
icon-assistive-text |
string |
Sets the alternative text for the icon specified by icon-name. |
||
|
display-tab |
true, false (Default: true) |
boolean |
To hide the tab title, set to false. |
Example c-tab Component
The c-tab is defined as an element inside c-tabset and has its own id so user can update and modify the content directly.
<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-tabs>