Tabs - TUX Docs

Splits up content into multiple sections, only showing one panel at a time.

Anatomy
Usage Guidelines
WordPress
Program Tabs
Specifications
1. Properties
2. Styling
Changelog
Related
1. Contains
Examples

Anatomy

Usage Guidelines

Useful for focusing on one section of information at a time.

If you have more than 3 tabs, consider using a different layout for your content.

WordPress

This component can be added to post content with the Tabs or Program Tabs block in the Gutenberg editor.

Program Tabs

Program Tabs allow you to show programs and specializations in either an unordered list or a summary inside of an accordion. You can narrow down which programs/specializations to show via either the Level of Study or Field of Study.

You can also exclude specific programs/specializations from appearing in this Program Tabs component. To do so, navigate to the program/specialization's edit screen, on the right hand side under either Program Details or Specialization Details you will see an option to "Exclude this from the Program Tabs component?". By default this will be "No". Switch it to "Yes" and then save your changes. The program/specialization will now be excluded from this component.

If you'd like to rearrange the order the Program Tabs appear when filtering by Level of Study this can be done by:

navigating to Programs > Level of Study in the wordpress sidebar.
drag and drop your desired order

Training video: https://www.loom.com/share/eca458185038470c9c8bd9f0ba26c092

Specifications

Properties

Property	Type	Description	Required	Default
tabs	`array`	Pairs of tab title and panel content	Yes	-
└ item	`object`	-	-	-
└ title	`string`	plain text or HTML content that goes in the tab trigger	Yes	-
└ content	`string`	Inner HTML content of the tab panel	Yes	-
class	`string`	list of additional classes to apply to main element.	No	-

Styling

Modifiers

Name	Class	Description
Cards	`.tux-c-tabs--cards`	Styles the tabs similar to a card component, while keeping the expand/collapse functionality
Cards Extended	`.tux-c-tabs--cards.extended`	Designed to be used with card tabs outside of other containers such as a one-column, this 'extended' modifier can be added to allow them to stretch full width while aligning the tab triggers to the standard site width
Wide	`.tux-c-tabs--wide`	Designed to be used with regular tabs outside of other containers such as a one-column, this modifier allows tab panels to fill their container while keeping the tab triggers within the standard site width

Colors

Name	Custom Property	Roles	Default Opacity	Description
bg-color	`--tux-comp-tabs--bg-color`	background	-	-
text-color	`--tux-comp-tabs--text-color`	primary	-	-
hover--bg-color	`--tux-comp-tabs--hover--bg-color`	primary	-	-
hover--text-color	`--tux-comp-tabs--hover--text-color`	primary	-	-
active--bg-color	`--tux-comp-tabs--active--bg-color`	on-background	-	-
active--text-color	`--tux-comp-tabs--active--text-color`	background	-	-
cards--bg-color	`--tux-comp-tabs--cards--bg-color`	surface	-	-
cards--panels-bg-color	-	background	-	-
cards--item-bg-color	-	background	-	-
cards--tab-active-bg-color	`--tux-comp-tabs--cards--tab-active-bg-color`	primary	-	-
cards--tab-active-text-color	`--tux-comp-tabs--cards--tab-active-text-color`	on-primary	-	-

Custom Properties

Name	Default	Resets	Description
`--tux-comp-tabs--tab-bg-color`	`rgba(136, 136, 136, 0.2)`	Yes	-
`--tux-comp-tabs--tab-hover-bg-color`	`rgba(136, 136, 136, 0.3)`	Yes	-
`--tux-comp-tabs--tab-selected-bg-color`	`var(--tux-theme--text-color, #222)`	Yes	-
`--tux-comp-tabs--tab-selected-text-color`	`var(--tux-theme--bg-color, #fff)`	Yes	-
`--tux-comp-tabs--cards--bg-color`	`#efefef`	No	-
`--tux-comp-tabs--cards--tab-active-color`	`#d90123`	No	-

Changelog

6.12.1 (2024-06-12)

fix: normalize icon color for card variant in color system v2 (954a6d7)

6.12.1 (2024-06-12)

fix: normalize icon color for card variant in color system v2 (954a6d7)

6.10.0 (2024-05-01)

fix: remove opacity for card variant (#577) (ff8a030)

6.6.0 (2024-01-24)

feat: add nav arrows to extended card variant (#526) (e5585ef)

6.4.0 (2023-11-27)

fix: exit keydown handler early if not in a tab (8c46f50)

6.2.0 (2023-10-04)

fix: ensure reusable blocks get unique HTML ids (#479) (7d780fe)

2.1.0 (2022-10-19)

fix: add lower z-index to card variation (#332) (f898db3)

1.37.0 (2022-08-18)

fix: add zindex support for mobile safari (#301) (eb734ed)

1.32.0 (2022-04-26)

fix: exit click handler early if not in a tab (98234c3)

1.28.2 (2022-01-25)

fix: only show arrows for card variation (#204) (6c28362)

1.28.0 (2022-01-21)

fix: adding right and left carets for mobile scrolling (#197) (cb82950)

1.23.1 (2021-08-20)

fix: add correct spacing for sage on mobile (8a7ad3b)
fix: apply active color to card bg, add text color option (645e0e7)
fix: reference custom property correctly for tablist (214d8a8)
fix: support custom colors for artesia (f432a58)

1.22.0 (2021-07-02)

fix: adjust layout for icons in card style tabs (#121) (01109e3)
fix: text wrapping bug fix (#126) (cb06544)

1.21.0 (2021-06-14)

fix: center card style tab label (#108) (2f5f11d)

1.20.0 (2021-05-26)

fix: adjust flex-basis to prevent scroll when 4 items are used (#99) (82cb423)

1.15.2 (2021-02-03)

fix: fixed active indicator bug on Internet Explorer (edcc26d)

1.12.0 (2020-10-21)

feat: add card variation (67018bc)

1.10.0 (2020-09-11)

feat: support prebuilt panels in 'content' attribute (19467e9)

1.7.0 (2020-07-13)

fix: adjust styling (c013b18)
fix: focus on tab switch with controls only (e8a22fd)

1.1.0

tabs added

Contains

Other core components embedded within this template.

Icon