Tabs | Web Component

The dk-tab-group component is a useful component to create tab feature on a web page.There are two main kinds of tabs: menu and sidebar.

To create tabs you must start with a dk-tab-group element. This element will be used to create the tabgroup. There are methods available on the element that allow you to control the tabs. Inside of dk-tab-group you will place several elements of dk-tab.

<dk-tab-group>
  <dk-tab></dk-tab>
  <dk-tab></dk-tab>
  <dk-tab></dk-tab>
  <dk-tab></dk-tab>
  <dk-tab></dk-tab>
</dk-tab-group>

Each element inside of dk-tabgroup will represent a single tab in the tabgroup. Each tab will have a label in the label attribute and the content of the tab.

Listening to change

The dk-tabgroup will emit a custom event called dkChange . This event listens to the mouse click or keyup and keydown events from the user. This event will set the new activeIndex and activeTab label the user can access.

const tabgroup = document.querySelector("dk-tab-group");
tabgroup.addEventListener("dkChange", (e) => {
  const label = e.detail.activeTab;
  const index = e.detail.activeIndex;
});

Properties

Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.

Property	Attribute	Description	Type	Default
`activeTab`	`active-tab`	This represents the label of the active tab	string	null
`activeTabIndex`	`active-tab-index`	This represents the tab index of the active tab	number	0
`overflowOpen`	`overflow-open`	This tells us if the overflow menu is open	boolean	false
`type`	`type`	Type of the tab group.It is either menu or sidebar. Default value is menu.	"menu" \| "sidebar"	"menu"

Events

Event	Description	Type
`dkChange`	The event that is fired when a new tab is selected. Tabindex and label of the tab are passed with the event	{ activeIndex: number; activeTab: string; }