Tabs Sass API

Variables

tabs-disable-everything

$tabs-disable-everything: false !default;

tabs-disable-icon

$tabs-disable-icon: false !default;

tabs-disable-stacked

$tabs-disable-stacked: false !default;

tabs-disable-reversed

$tabs-disable-reversed: false !default;

tabs-disable-tablist-padded

$tabs-disable-tablist-padded: false !default;

Used By

• @mixin tabs-tablist-styles

tabs-disable-tablist-vertical

$tabs-disable-tablist-vertical: false !default;

Used By

• @mixin tabs-indicator-styles
• @mixin tabs-tablist-styles

tabs-disable-tablist-indicator

$tabs-disable-tablist-indicator: false !default;

Used By

• @mixin tabs-indicator-styles

tabs-disable-tablist-hidden-scrollbar

$tabs-disable-tablist-hidden-scrollbar: false !default;

Used By

• @mixin tabs-tablist-styles

tabs-disable-tablist-scroll-button

$tabs-disable-tablist-scroll-button: false !default;

Used By

• @mixin tabs-styles

tabs-disable-tablist-active-indicator-transition

$tabs-disable-tablist-active-indicator-transition: $disable-tablist-indicator !default;

Used By

• @mixin tabs-indicator-styles

tabs-disable-tablist-scroll-button-vertical

$tabs-disable-tablist-scroll-button-vertical: $disable-tablist-vertical !default;

Used By

• @mixin tabs-tablist-button-styles

tabs-disable-indicator

$tabs-disable-indicator: false !default;

Used By

• @mixin tabs-variables
• @mixin tabs-styles

tabs-disable-indicator-vertical

$tabs-disable-indicator-vertical: $disable-tablist-vertical !default;

Used By

• @mixin tabs-indicator-styles

tabs-typography

$tabs-typography: map.remove(typography.$button-styles, line-height) !default;

tabs-gap

$tabs-gap: spacing.get-var(sm) !default;

tabs-height

$tabs-height: 3rem !default;

tabs-stacked-height

$tabs-stacked-height: 4.5rem !default;

Used By

• @mixin tabs-variables

tabs-horizontal-padding

$tabs-horizontal-padding: spacing.get-var(md) !default;

tabs-vertical-padding

$tabs-vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;

tabs-min-width

$tabs-min-width: 5.625rem !default;

tabs-max-width

$tabs-max-width: 20rem !default;

tabs-indicator-height

$tabs-indicator-height: 0.125rem !default;

Used By

• @mixin tabs-indicator-styles

tabs-indicator-background

$tabs-indicator-background: theme.theme-get-var(primary-color) !default;

Used By

• @mixin tabs-indicator-styles
• @mixin tabs-variables

tabs-active-color

$tabs-active-color: theme.theme-get-var(text-primary-color) !default;

Used By

• @mixin tabs-tab-styles
• @mixin tabs-variables

tabs-inactive-color

$tabs-inactive-color: theme.theme-get-var(text-secondary-color) !default;

Used By

• @mixin tabs-tab-styles
• @mixin tabs-variables

tabs-disabled-color

$tabs-disabled-color: theme.theme-get-var(text-disabled-color) !default;

Used By

• @mixin tabs-tab-styles
• @mixin tabs-variables

tabs-transition-duration

$tabs-transition-duration: transition.$linear-duration !default;

tabs-transition-timing-function

$tabs-transition-timing-function: transition.$linear-timing-function !default;

tabs-tablist-scrollable-horizontal-padding

$tabs-tablist-scrollable-horizontal-padding: calc(
  spacing.get-var(xl) * 1.625
) !default;

Used By

• @mixin tabs-tablist-styles

tabs-tablist-scroll-button-z-index

$tabs-tablist-scroll-button-z-index: 2 !default;

Used By

• @mixin tabs-tablist-button-styles

tabs-tablist-scroll-button-background-color

$tabs-tablist-scroll-button-background-color: theme.theme-get-var(
  background-color,
  inherit
) !default;

Used By

• @mixin tabs-tablist-button-styles

tabs-tablist-vertical-indicator-position

$tabs-tablist-vertical-indicator-position: 0 !default;

Used By

• @mixin tabs-indicator-styles

tabs-tablist-button-border-radius

$tabs-tablist-button-border-radius: 0 !default;

Used By

• @mixin tabs-tablist-button-styles

tabs-variables

$tabs-variables: (
  color,
  active-color,
  inactive-color,
  disabled-color,
  indicator-background,
  min-height,
  max-width,
  min-width,
  stacked-height,
  stacked-width,
  padding,
  stacked-padding
);

Mixins

tabs-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

tabs-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

tabs-indicator-styles

@mixin indicator-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin tabs-styles

Requires

• @mixin app-bar-use-var
• @function theme-color-var-fallback
• $tabs-indicator-background
• $tabs-indicator-height
• $tabs-disable-indicator-vertical
• $tabs-tablist-vertical-indicator-position
• $tabs-disable-tablist-indicator
• $dialog-min-width
• $tabs-disable-tablist-vertical
• $tabs-disable-tablist-active-indicator-transition
• $link-transition-duration
• $overlay-transition-timing-function

tabs-tablist-styles

@mixin tablist-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin tabs-styles

Requires

• @mixin app-bar-set-var
• $tabs-disable-tablist-hidden-scrollbar
• $tabs-disable-tablist-vertical
• $tabs-disable-tablist-padded
• $tabs-tablist-scrollable-horizontal-padding

tabs-tablist-button-styles

@mixin tablist-button-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin tabs-styles

Requires

• $tabs-tablist-button-border-radius
• $tabs-tablist-scroll-button-background-color
• $snackbar-max-width
• $tabs-tablist-scroll-button-z-index
• $tabs-disable-tablist-scroll-button-vertical

tabs-tab-styles

@mixin tab-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin tabs-styles

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function theme-color-var-fallback
• @function app-bar-get-var
• $badge-typography
• $tabs-inactive-color
• $avatar-disable-icon
• $app-bar-gap
• $link-transition-duration
• $overlay-transition-timing-function
• $box-disable-stacked
• $box-disable-reversed
• $tabs-active-color
• $tabs-disabled-color

tabs-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• @function is-theme-color-var
• $app-bar-disable-everything
• $tabs-inactive-color
• $tabs-active-color
• $tabs-disabled-color
• $app-bar-height
• $snackbar-max-width
• $dialog-min-width
• $app-bar-horizontal-padding
• $box-disable-stacked
• $tabs-stacked-height
• $app-bar-vertical-padding
• $tabs-disable-indicator
• $tabs-indicator-background

tabs-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin tabs-tablist-styles
• @mixin tabs-tab-styles
• @mixin tabs-indicator-styles
• @mixin tabs-tablist-button-styles
• $app-bar-disable-everything
• $tabs-disable-indicator
• $tabs-disable-tablist-scroll-button

Functions

tabs-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

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