Skip to main content
react-md
react-md - Tabs - SassDoc

Variables

rmd-tab-height

Number

The default height for a tab.

$rmd-tab-height: 3rem !default;

rmd-tab-stacked-height

Number

The default height for a tab that has stacked text with an icon.

$rmd-tab-stacked-height: 4.5rem !default;

rmd-tab-horizontal-padding

Number

The amount of padding to apply to the left and right of the tab's content

$rmd-tab-horizontal-padding: 1rem !default;

rmd-tab-vertical-padding

Number

The amount of padding to apply to the top and bottom of the tab's content

$rmd-tab-vertical-padding: 0.75rem !default;

rmd-tab-min-width

Number

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;

rmd-tab-max-width

Number

The maxium 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;

rmd-tab-indicator-color

Color|String

The tab indicator color to use.

$rmd-tab-indicator-color: rmd-theme-var(primary) !default;

rmd-tab-active-color

Color|String

The color to use when a tab has become active.

$rmd-tab-active-color: rmd-theme(text-primary-on-background) !default;

rmd-tab-inactive-color

Color|String

The color to use when a tab is inactive.

$rmd-tab-inactive-color: rmd-theme(text-secondary-on-background) !default;

rmd-tab-disabled-color

Color|String

The color to use when a tab is disabled.

$rmd-tab-disabled-color: rmd-theme(text-disabled-on-background) !default;

rmd-tab-active-indicator-height

Number

The height for the active tab indicator divider.

$rmd-tab-active-indicator-height: 0.125rem !default;

rmd-tabs-positions

List

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;

rmd-tabs-scrollable-padding

Number

The amount of padding to use when the scollable 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;

rmd-tabs-theme-values

Map

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;

Mixins

rmd-tabs-theme

mixin

Creates the styles for one of the tabs's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-tabs-theme-values value to.

String
$theme-style

One of the keys of rmd-tabs-theme-values to extract a value from.

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 rmd-tabs-theme-values map when null.

Color|String|Numbernull

rmd-tabs-theme-update-var

mixin

Updates one of the tabs's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The tabs theme style type to update. This should be one of the $rmd-tabs-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-tabs

mixin

rmd-tab

mixin

rmd-tab-panels

mixin

rmd-tab-panel

mixin

react-md-tabs

mixin

Creates all the styles for this package as well as defining all the theme CSS variables.

Functions

rmd-tabs-theme

function

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.

Returns — Color|String|Number

one of the tabs's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-tabs-theme-values map keys to get a value for.

String

rmd-tabs-theme-var

function

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.

Returns — String

one of the tabs's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-tabs-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull