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