The default height for a tab.
$rmd-tab-height: 3rem !default;The default height for a tab that has stacked text with an icon.
$rmd-tab-stacked-height: 4.5rem !default;The amount of padding to apply to the left and right of the tab's content
$rmd-tab-horizontal-padding: 1rem !default;The amount of padding to apply to the top and bottom of the tab's content
$rmd-tab-vertical-padding: 0.75rem !default;The minimum width for a tab. The way tabs work is that they will grow as needed to fill the entire space of the Tabs container width. This also means that they will shrink if the Tabs container is small.
$rmd-tab-min-width: 5.625rem !default;The maximum width for a tab. The way tabs work is that they will grow as needed to fill the entire space of the Tabs container width. This also means that they will shrink if the Tabs container is small.
$rmd-tab-max-width: 20rem !default;The tab indicator color to use.
$rmd-tab-indicator-color: rmd-theme-var(primary) !default;The color to use when a tab has become active.
$rmd-tab-active-color: rmd-theme(text-primary-on-background) !default;The color to use when a tab is inactive.
$rmd-tab-inactive-color: rmd-theme(text-secondary-on-background) !default;The color to use when a tab is disabled.
$rmd-tab-disabled-color: rmd-theme(text-disabled-on-background) !default;The height for the active tab indicator divider.
$rmd-tab-active-indicator-height: 0.125rem !default;A list of alignments that should be supported by the Tabs component. These values should be valid values for the justify-content property.
$rmd-tabs-positions: (left center right) !default;The amount of padding to use when the scrollable prop is enabled on the Tabs component that will be added to the left of the first tab (or right for RTL languages). This padding is useful to help users know that the content is scrollable.
$rmd-tabs-scrollable-padding: 3.25rem !default;A map of all the themeable parts of the tabs package.
$rmd-tabs-theme-values: (
active: $rmd-tab-active-color,
inactive: $rmd-tab-inactive-color,
disabled: $rmd-tab-disabled-color,
indicator-color: $rmd-tab-indicator-color,
) !default;Creates the styles for one of the tabs's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the tabs's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The tabs theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates all the styles for this package as well as defining all the theme CSS variables.
This function is used to quickly get one of the tabs's theme values. This is really just for the rmd-tabs-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the tabs's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the tabs's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-tabs-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the tabs's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |