Provides the styling necessary for the tab's active state. Applies to both the base .c-text-tabs__trigger and .c-text-tabs__trigger--menu. Required if the tab is active.
Attributes
.t-color--brandRequired
Applies the brand theme color to indicate the item is active.
.t-bgc-after--brandRequired
Applies the brand theme color as a bottom border to indicate the item is active.
span.c-text-tabs__labelRequired
The wrapper around the tab's description.
<template><SkyTextTabs><SkyTextTabsPanelname="Tab 1"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 2"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel></SkyTextTabs></template><script>exportdefault{name:'TextTabsBase',}</script>
Implementation Guide
Vue file imports
Use the Skyline Vue plugin to globally import all Skyline
components.
Learn more
Provides the styling necessary for the tab's active state. Applies to both the base .c-text-tabs__trigger and .c-text-tabs__trigger--menu. Required if the tab is active.
Attributes
.t-color--brandRequired
Applies the brand theme color to indicate the item is active.
.t-bgc-after--brandRequired
Applies the brand theme color as a bottom border to indicate the item is active.
span.c-text-tabs__labelRequired
The wrapper around the tab's description.
.c-text-tabs__menu-wrapper
The wrapper around the More dropdown menu. Required if the content is wrapping and the menu is visible.
The markup required for the variation of the button that triggers the More dropdown menu.
Attributes
role="button"Required
Defines the element as a button for the screen reader.
aria-haspopup="true"Required
Provides context to the screen reader user that this button triggers a menu.
aria-controls="<id of DropdownMenu component>"Required
Allows the screen reader user to know which menu this button controls.
aria-expanded="true | false"Required
Tells the screen reader user about the state of the menu.
svg.c-text-tabs__icon
Provides styling to the tab's icon.
Attributes
.t-fill--brand
Required if the tab is active (see c-tabs__trigger--active above). Applies the brand color to the icon to indicate the tab is active.
focusable="false"Required
Removes the element for being able to gain focus in IE/Edge.
role="presentation"Required
Tells the screen reader to ignore this element as it is not relevant for a non-sighted user.
<template><divstyle="max-width: 400px;margin-left: auto;margin-right: auto"><SkyTextTabs><SkyTextTabsPanelname="Tab 1"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 2"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 3"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 4"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 5"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 6"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 7"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 8"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 9"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel><SkyTextTabsPanelname="Tab 10"><!-- Another vue component could go inside here, or just HTML --></SkyTextTabsPanel></SkyTextTabs></div></template><script>exportdefault{name:'TextTabsMenu',}</script>
Implementation Guide
Vue file imports
Use the Skyline Vue plugin to globally import all Skyline
components.
Learn more
