Code
<template>
<div class="wd-example-preview-tabs">
<w-tabs id="tabs-basic"></w-tabs>
</div>
</template>
<script type="module">
const tabList = [
{
label: 'Medical History',
value: 'medical-history',
isActive: true
},
{
label: 'Appointments',
value: 'appointments'
},
{
label: 'Documents',
value: 'documents'
},
{
label: 'Patient Profile',
value: 'patient-profile'
},
{
label: 'Payments',
value: 'payments'
}
];
function handleTabChanged(activeTabValue) {
console.log(activeTabValue.detail[0]);
}
const tabsBasic = document.querySelector('#tabs-basic');
tabsBasic.items = tabList;
tabsBasic.addEventListener('change', handleTabChanged);
</script>
Props
Tabs
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
items |
Array of objects that represents the list of TabItems for the tab component. The properties accepted are `label`, 'value', 'isActive' and 'iconName'. |
array |
[] |
[ { label: String, value: String, isActive: Boolean, iconName: String, data-*: String } ] |
|
aria-label |
Defines a string value that labels the tab component. |
string |
tabs |
|
TabsItem
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
value Required |
Value required for accessibility compatibility to connect a tab item with a tab panel. Remember that the value provided to the tab item should be unique and the same as the value provided for the TabPanel component. Under the hood, we are adding support connecting the aria control property with the id of the tabpanel. |
string |
|
|
|
active |
Set the tab as active |
boolean |
false |
|
|
counter |
Controls the display of a badge with a numeric counter. |
number |
|
|
|
counter-type |
Allows you to choose the badge type. |
string |
neutral |
accent, accent-inverted, neutral, info, success, warning, danger, neutral-inverted, info-inverted, success-inverted, warning-inverted, danger-inverted |
|
icon-name |
Set the tab icon name to display on the left. |
string |
null |
|
TabPanel
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
value Required |
Value required for accessibility compatibility to connect a tab panel with its tab . Remember that the value provided to the tab panel should be unique and the same as the value provided for the TabItem component. Under the hood, we are adding support connecting the id of the tabpanel with the aria control property of the tab. |
string |
|
|
|
active |
Set the tabpanel as active. By default, the tabpanel is enabled so this is the property to be used depending on the current active tab. |
boolean |
false |
|
Slots
Tabs
|
Name |
Description |
|---|---|
|
default |
Default content slot |
TabsItem
|
Name |
Description |
|---|---|
|
default |
Default content slot |
TabPanel
|
Name |
Description |
|---|---|
|
default |
Default content slot |
Events
Tabs
|
Name |
Description |
Type |
|---|---|---|
|
change |
This event is emitted when active tab change. |
{ "names": [ "String" ] } |
TabsItem
|
Name |
Description |
Type |
|---|---|---|
|
item-click |
This event is emitted when the current tab is clicked. |
{ "names": [ "String" ] } |