Tabs

Variables

Module Settings

$config: (
  "margin" : (2rem 0),
  "print-margin" : 1.5em,
  "tablist-divider" : true,
  "tablist-divider-width" : 1px,
  "indicator-size" : 3px,
  "indicator-color" : currentColor,
  "tab-color" : "type-tertiary",
  "tab-color-hover" : "link-hover",
  "tab-color-selected" : "selected",
  "tab-background-color-selected" : null,
  "tab-font-weight" : true,
  "tab-padding" : (0.75em),
  "tab-gap" : 1em,
  "tabpanel-background-color" : #f6f6f6,
  "tabpanel-padding" : (2rem),
  "vertical-tablist-width" : minmax(15rem, 30%),
  "vertical-tab-padding" : (0.25em 0.75em),
  "vertical-divider-width" : 0px,
  "vertical-tab-gap" : 0.75em,
  "vertical-indicator-left" : true,
  "vertical-breakpoint" : true,
  "horizontal-tab-wrap" : false
);

File Information

• File: _tabs.scss
• Group: tabs
• Type: variable
• Lines (comments): 33-56
• Lines (code): 58-81

Map Properties

Name	Type	Default	Description
margin	Dimension	(2rem, 0)	The margin for the tabs container
print-margin	Dimension	1.5em	Margin between tabs when stacked for print
tablist-divider	CssValue	true	The border separating the tabs from the panels. By default (true) will use element rule light style
tablist-divider-width	Dimension	1px	The width of the divider
tabpanel-background-color	Color	rgb(245, 245, 245)	The tabpanel background color.
tabpanel-padding	Dimension	(2rem,)	Padding for the tabpanel
indicator-size	Dimension	0.25em	The size of the tab's active border/indicator
indicator-color	Color	currentColor	The color of the indicator
tab-color	Color	link	The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.
tab-color-hover	Color	link-hover	The type color for the tabs when hovered or focused. This uses color.scss, so the value of this options should be a variable from color.scss.
tab-color-selected	Color	selected	The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
tab-background-color-selected	Color	null	The tab background color when selected
tab-font-weight	CssValue	true	The font weight for the tab, defaults to typography "font-weight-semibold"
tab-padding	Dimension	0.75em 0.1em 0.75em 0.1em	Padding for the tab
tab-gap	Dimension	1em	Gap between tabs
vertical-tablist-width	Dimension	minmax(15rem, 30%),	The width of the tablist column when tabs are layout is vertical
vertical-tab-padding	Dimension	(0.25em 0.75em)	Tab padding when vertical
vertical-divider-width	Dimension	0px	Divider between tabs and panels when vertical
vertical-tab-gap	Dimension	0.75em	The gap between tabs when vertical
vertical-indicator-left	Boolean	true	The indicator for selected tab should be on the left when vertical (false will be on right/inside)
vertical-breakpoint	Boolean	true	Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')
horizontal-tab-wrap	Boolean	false	Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap

Mixins

Change modules $config

File Information

• File: _tabs.scss
• Group: tabs
• Type: mixin
• Lines (comments): 83-86
• Lines (code): 88-90

Examples

@include ulu.component-tabs-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	Map	Map of changes

Require

• $config

Output component stylesheet

File Information

• File: _tabs.scss
• Group: tabs
• Type: mixin
• Lines (comments): 102-104
• Lines (code): 106-247

Examples

@include ulu.component-tabs-styles();

Require

• get()

Functions

Get a config option

File Information

• File: _tabs.scss
• Group: tabs
• Type: function
• Lines (comments): 92-95
• Lines (code): 97-100

Examples

@include ulu.component-tabs-get("property");

Parameters

Name	Type	Description
$name	Map	Name of property

Require

• $config