Boolean$tabs-disable-everything: false !default;Set to true to disable all the styles
Boolean$tabs-disable-icon: false !default;Set to true to disable the icon support within a Tab.
Boolean$tabs-disable-stacked: false !default;Set to true to disable the stacked Tab styles.
Boolean$tabs-disable-reversed: false !default;Set to true to disable the reversed Tab styles.
Boolean$tabs-disable-tablist-padded: false !default;Set to true to disable the padded TabList styles.
Boolean$tabs-disable-tablist-vertical: false !default;Set to true to disable the vertical TabList styles.
Boolean$tabs-disable-tablist-indicator: false !default;Set to true if the active tab indicator animation is not required due to all TabList components enabling the disableTransition prop and all
Tab components enable the tabIndicator prop.
Boolean$tabs-disable-tablist-hidden-scrollbar: false !default;Set to true to disable the hidden scrollbar styles on the TabList.
Boolean$tabs-disable-tablist-scroll-button: false !default;Set to true to disable the styles for the scroll buttons within the
TabList.
Boolean$tabs-disable-tablist-active-indicator-transition: $disable-tablist-indicator !default;Set to true to disable the active tab indicator animation from the
TabList component.
Boolean$tabs-disable-tablist-scroll-button-vertical: $disable-tablist-vertical !default;Set to true to disable the icon support within a Tab.
Boolean$tabs-disable-indicator: false !default;Set to true to disable the active tab indicator styles.
Boolean$tabs-disable-indicator-vertical: $disable-tablist-vertical !default;Set to true to disable the vertical active tab indicator styles.
Map$tabs-typography: map.remove(typography.$button-styles, line-height) !default;The default Tab typography.
Number$tabs-gap: spacing.get-var(sm) !default;The default gap between the Tab icon and children.
Number$tabs-height: 3rem !default;The default Tab height.
Number$tabs-stacked-height: 4.5rem !default;The default Tab stacked height.
Number$tabs-horizontal-padding: spacing.get-var(md) !default;The default Tab horizontal padding.
Number$tabs-vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;The default Tab vertical padding while stacked.
Number$tabs-min-width: 5.625rem !default;The Tab min width.
Number$tabs-max-width: 20rem !default;The Tab max width.
Number$tabs-indicator-height: 0.125rem !default;The default height for the active tab indicator.
Color$tabs-indicator-background: theme.theme-get-var(primary-color) !default;The default background-color for the active tab indicator.
Color$tabs-active-color: theme.theme-get-var(text-primary-color) !default;The default text color for an active Tab.
Color$tabs-inactive-color: theme.theme-get-var(text-secondary-color) !default;The default text color for an inactive Tab.
Color$tabs-disabled-color: theme.theme-get-var(text-disabled-color) !default;The default text color for a disabled Tab.
Number$tabs-transition-duration: transition.$linear-duration !default;The default transition duration for the active tab indicator.
Number$tabs-transition-timing-function: transition.$linear-timing-function !default;The default transition timing function for the active tab indicator.
Number$tabs-tablist-scrollable-horizontal-padding: calc(
spacing.get-var(xl) * 1.625
) !default;The default padding for a TabList with the padded prop enabled.
Number$tabs-tablist-scroll-button-z-index: 2 !default;The default z-index for a TabList scroll button.
Number$tabs-tablist-scroll-button-background-color: theme.theme-get-var(
background-color,
inherit
) !default;The default background color for a TabList scroll button.
Number$tabs-tablist-vertical-indicator-position: 0 !default;The default top or left position for the active tab indicator relative to the TabList container.
Number$tabs-tablist-button-border-radius: 0 !default;The border-radius for the TabListScrollButton.
List$tabs-variables: (
color,
active-color,
inactive-color,
disabled-color,
indicator-background,
min-height,
max-width,
min-width,
stacked-height,
stacked-width,
padding,
stacked-padding
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin indicator-styles { … }This should only be used if not using the tab-styles mixin.
mixin@mixin tablist-styles { … }This should only be used if not using the tab-styles mixin.
mixin@mixin tablist-button-styles { … }This should only be used if not using the tab-styles mixin.
mixin@mixin tab-styles { … }This should only be used if not using the tab-styles mixin.
mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |