Tabs

Variables

md-tab-include-icons
$md-tab-include-icons: true !default;
Sass (Scss)

Description

Boolean if the styles for tabs with a label and an icon should be included.

Type

Boolean
md-tab-include-toolbars
$md-tab-include-toolbars: true !default;
Sass (Scss)

Description

Boolean if the styles for wrapping a toolbar and tabs together should be included.

Type

Boolean

See

md-tab-include-prominent-toolbars
$md-tab-include-prominent-toolbars: $md-toolbar-include-prominent !default;
Sass (Scss)

Description

Boolean if the styles for offsetting content from a prominent toolbar and tabs should be included.

Type

Boolean
md-tab-include-pagination-overflow
$md-tab-include-pagination-overflow: true !default;
Sass (Scss)

Description

Boolean if the styles for a pagination tab overflow on desktop screens should be included.

Type

Boolean
md-tab-include-menu-overflow
$md-tab-include-menu-overflow: true !default;
Sass (Scss)

Description

Boolean if the styles for a menu tab overflow on desktop screens should be included.

Type

Boolean
md-tab-include-swipeable
$md-tab-include-swipeable: true !default;
Sass (Scss)

Description

Boolean if the mobile swipeable styles should be included.

Type

Boolean
md-tab-height
$md-tab-height: 48px !default;
Sass (Scss)

Description

The height for a tab with only a label or only an icon.

Type

Number

Used by

md-tab-icon-height
$md-tab-icon-height: 72px !default;
Sass (Scss)

Description

The height for a tab with a label and an icon.

Type

Number

Used by

md-tab-max-width
$md-tab-max-width: 264px !default;
Sass (Scss)

Description

The absolute maximum width for a tab. A tab's width is either the view's width - 56px or this value; whichever is smaller.

Type

Number

Used by

md-tab-indicator-height
$md-tab-indicator-height: 2px !default;
Sass (Scss)

Description

The height for the active tab indicator.

Type

Number

Used by

md-tab-multiline-font-size
$md-tab-multiline-font-size: 12px !default;
Sass (Scss)

Description

The font size for a tab that spans multiple lines.

Type

Number

Used by

md-tab-padding
$md-tab-padding: 12px !default;
Sass (Scss)

Description

The left and right padding for a tab.

Type

Number

Used by

md-tab-single-line-padding-bottom
$md-tab-single-line-padding-bottom: 20px !default;
Sass (Scss)

Description

The bottom padding for a tab that only spans one line.

Type

Number

Used by

md-tab-icon-padding-bottom
$md-tab-icon-padding-bottom: 16px !default;
Sass (Scss)

Description

The padding bottom for a tab that has both a label and an icon.

Type

Number

Used by

md-tab-icon-margin-bottom
$md-tab-icon-margin-bottom: 10px !default;
Sass (Scss)

Description

The margin bottom for an icon in a tab.

Type

Number

Used by

md-tab-mobile-min-width
$md-tab-mobile-min-width: 72px !default;
Sass (Scss)

Description

The min width for a tab on mobile devices.

Type

Number

Used by

md-tab-mobile-font-size
$md-tab-mobile-font-size: 14px !default;
Sass (Scss)

Description

The font size for a tab on mobile devices.

Type

Number

Used by

md-tab-desktop-font-size
$md-tab-desktop-font-size: 13px !default;
Sass (Scss)

Description

The font size for a tab on desktop screens.

Type

Number

Used by

md-tab-desktop-min-width
$md-tab-desktop-min-width: 160px !default;
Sass (Scss)

Description

The min width for a tab on desktop screens.

Type

Number

Used by

md-tab-desktop-padding
$md-tab-desktop-padding: 24px !default;
Sass (Scss)

Description

The left and right padding for a tab on desktop screens.

Type

Number

Used by

Mixins

react-md-tabs
@mixin react-md-tabs($secondary-color: $md-secondary-color, $include-media: $md-media-included, $include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-pagination-overflow: $md-tab-include-pagination-overflow, $include-menu-overflow: $md-tab-include-menu-overflow, $include-swipeable: $md-tab-include-swipeable, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the stiles for tabs.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The app's secondary color. This is used to style the active tab indicator.

Color
$md-secondary-color
$include-media

Boolean if the media queries should be included with this mixin.

Boolean
$md-media-included
$include-icons

Boolean if the styles for a tab with a label and an icon should be included.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for a simple container holding a toolbar and tabs should be included.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for the simple container holding a toolbar and tabs should include the prominent toolbar styles.

Boolean
$md-tab-include-prominent-toolbars
$include-pagination-overflow

Boolean if the styles for desktop pagination overflow should be included.

Boolean
$md-tab-include-pagination-overflow
$include-menu-overflow

Boolean if the styles for a drop down menu tab overflow on desktop screens should be included.

Boolean
$md-tab-include-menu-overflow
$include-swipeable

Boolean if the styles for swiping the tab content on mobile devices should be included.

Boolean
$md-tab-include-swipeable
$include-dense-icons

Boolean if the dense spec for icons should be included for tabs.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-tabs;
Sass (Scss)

Requires

Used by

react-md-tabs-tab
@mixin react-md-tabs-tab($include-icons: $md-tab-include-icons) {}
Sass (Scss)
Click to expand

Description

Includes the styles for a tab only. This should probably not be used since it is included in the react-md-tabs mixin.

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for a tab with a label and icon should be included.

Boolean
$md-tab-include-icons

Requires

Used by

See

react-md-tabs-indicator
@mixin react-md-tabs-indicator($secondary-color: $md-secondary-color) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the tab indicator only. This should probably not be used since it is included in the react-md-tabs mixin.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The app's secondary color to theme with.

Color
$md-secondary-color

Requires

Used by

See

react-md-tabbed-toolbars
@mixin react-md-tabbed-toolbars {}
Sass (Scss)
Click to expand

Description

Includes the styles for toolbars that have tabs as well.

Parameters

None

Used by

react-md-tabs-overflow
@mixin react-md-tabs-overflow($include-pagination-overflow: $md-tab-include-pagination-overflow, $include-menu-overflow: $md-tab-include-menu-overflow) {}
Sass (Scss)
Click to expand

Description

Includes the styles for desktop tab overflow.

Parameters

NameDescriptionTypeDefault value
$include-pagination-overflow

Boolean if the styles for desktop pagination overflow should be included.

Boolean
$md-tab-include-pagination-overflow
$include-menu-overflow

Boolean if the styles for a drop down menu tab overflow on desktop screens should be included.

Boolean
$md-tab-include-menu-overflow

Used by

react-md-tabs-swipeable
@mixin react-md-tabs-swipeable {}
Sass (Scss)
Click to expand

Description

Includes the styles for the swipeable views as well as some offset classes for positioning the tabs content.

Parameters

None

Requires

Used by

react-md-tabs-icon
@mixin react-md-tabs-icon {}
Sass (Scss)
Click to expand

Description

Includes the styles for an icon in the tabs.

Parameters

None

Requires

Used by

react-md-tabs-content
@mixin react-md-tabs-content($toolbar-height, $prominent-toolbar-height, $include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-swipeable: $md-tab-include-swipeable) {}
Sass (Scss)
Click to expand

Description

This is mostly an internal mixin for tabs. It will create the tabs content offset class names related to the current parameters.

Parameters

NameDescriptionTypeDefault value
$toolbar-height

The current toolbar height.

Number
$prominent-toolbar-height

The current prominent toolbar height.

Number
$include-icons

Boolean if the icon styles for tabs should also be included.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the toolbar styles should be included.

Boolean
$md-tab-include-toolbars
$include-swipeable

Boolean if the swipeable styles should be included.

Boolean
$md-tab-include-swipeable

Requires

Used by

react-md-tabs-mobile
@mixin react-md-tabs-mobile {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on mobile devices.

Parameters

None

Requires

Used by

react-md-tabs-mobile-portrait
@mixin react-md-tabs-mobile-portrait($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on mobile devices that are portrait. This really only adds styles for offsetting the tabs content when there is a toolbar. No styles will be included if the $include-toolbars or $include-swipeable params are false.

This mixin will define some offset class names to position the tabs content.

  • .md-tabs-content--offset-toolbar
  • .md-tabs-content--offset-toolbar-icon
  • .md-tabs-content--offset-toolbar-prominent

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for offsetting the tabs content when there is a tab with both a label and an icon.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a toolbar and tabs.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a prominent toolbar and tabs.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the tab's content is swipeable.

Boolean
$md-tab-include-swipeable

Requires

Used by

react-md-tabs-mobile-landscape
@mixin react-md-tabs-mobile-landscape($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-swipeable: $md-tab-include-swipeable) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on mobile devices that are landscape. This really only adds styles for offsetting the tabs content when there is a toolbar. No styles will be included if the $include-toolbars or $include-swipeable params are false.

This mixin will define some offset class names to position the tabs content.

  • .md-tabs-content--offset-toolbar
  • .md-tabs-content--offset-toolbar-icon

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for offsetting the tabs content when there is a tab with both a label and an icon.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a toolbar and tabs.

Boolean
$md-tab-include-toolbars
$include-swipeable

Boolean if the tab's content is swipeable.

Boolean
$md-tab-include-swipeable

Requires

Used by

react-md-tabs-tablet
@mixin react-md-tabs-tablet($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on tablet devices. This really only adds styles for offsetting the tabs content when there is a toolbar. No styles will be included if the $include-toolbars or $include-swipeable params are false.

This mixin will define some offset class names to position the tabs content.

  • .md-tabs-content--offset-toolbar
  • .md-tabs-content--offset-toolbar-icon

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for offsetting the tabs content when there is a tab with both a label and an icon.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a toolbar and tabs.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a prominent toolbar and tabs.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the tab's content is swipeable.

Boolean
$md-tab-include-swipeable

Requires

Used by

react-md-tabs-desktop
@mixin react-md-tabs-desktop($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on desktop screens.

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for a tab with a label and an icon should be included.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for a simple container holding a toolbar and tabs should be included.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for the simple container holding a toolbar and tabs should include the prominent toolbar styles.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the styles for swiping the tab content on mobile devices should be included.

Boolean
$md-tab-include-swipeable
$include-dense-icons

Boolean if the dense spec for icons should be used for the tabs.

Boolean
$md-font-icon-include-dense

Requires

Used by

react-md-tabs-media
@mixin react-md-tabs-media($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates all the styles for tabs at different media sizes.

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for a tab with a label and an icon should be included.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for a simple container holding a toolbar and tabs should be included.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for the simple container holding a toolbar and tabs should include the prominent toolbar styles.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the styles for swiping the tab content on mobile devices should be included.

Boolean
$md-tab-include-swipeable
$include-dense-icons

Boolean if the dense spec for icons should be used for the tabs.

Boolean
$md-font-icon-include-dense

Requires

Used by

react-md-theme-tabs
@mixin react-md-theme-tabs($secondary-color: $md-secondary-color) {}
Sass (Scss)
Click to expand

Description

Updates the theme for tabs only if the $secondary-color does not equal the $md-secondary-color. This really changes the color of the tab indicator.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary app color to theme with.

Color
$md-secondary-color

Examples

Example Usage SCSS

.theme-a-red {
  @include react-md-theme-tabs($md-red-a-200);
}
Sass (Scss)

Requires

Used by