Tabs extended

Core Layout component

Tabs extended extends the Carbon tabs component by adding the accordion to smaller breakpoints. This extension in feature allows the content to be more accessible at smaller breakpoints and mobile users.

---

Table of contents

• 1. Children
• 2. Tabs
  • 2.1 Item
  • 2.2 Orientation
• 3. Accordion
  • 3.1 Item

Dependencies (2)

• Carbon accordion
• Carbon tabs

Used by (1)

• Tabs extended media

Back links (2)

Tabs extended media (1)

• extended media depends on the Tabs extended component

Writing functional specs (1)

• _An example of a Tabs extended

Resources

• r1: Box folder

---

1. Children

The children can have anything placed inside of it from content to another component as seen in Tabs extended media. The children are shared across the Carbon tabs, and Carbon accordion across all breakpoints. Each tab item, and related accordion item has an area for its own children.

Back to top

2. Tabs

The tabs leverages Carbon tabs as is for the most part as a dependency, and passes its corresponding children ¹ for that tab. The only differences are listed below. Children ¹, and tab titles mirror accordion, and is only visible at larger breakpoints.

Logic

	condition	description
2.0.1	lg xlg max	Any breakpoint lg and larger renders the Carbon tabs
2.0.2	sm md	Any breakpoint md and smaller hides the Carbon tabs

See Carbon tabs for more information

2.1 Item

Logic

	condition	description
2.1.1	content overflows at 2 lines	Content overflows at 2 lines instead of the components original 1 line overflow.
2.1.2	removed fixed width	Tab width is based on content, and should not have a fixed width.
2.1.3	active	First item active onLoad unless author overrides. Mirrors accordion's 3 active state as user interacts.

See design specs ^r1 for visual details

2.2 Orientation

Logic

	condition	description
2.2.1	horizontal (default)	By default, or when this option is selected this component lays its tabs out in a horizontal line next to each other with children 1 below.
2.2.2	vertical	When the vertical option is selected the tabs are stacked on top of each other off to the side of its children 1.

See design specs ^r1 for visual details

Visual example

Back to top

3. Accordion

The accordion uses the Carbon accordion as a dependency without hardly any changes. This is used at the smaller breakpoints to allow for better reading of tabs on smaller devices, and mirrors the children ¹ and active tabs within the tab ² at larger breakpoints.

Logic

	condition	description
3.0.1	lg xlg max	Any breakpoint lg and larger hides the Carbon accordion
3.0.2	sm md	Any breakpoint md and smaller renders the Carbon accordion

See Carbon accordion for more information

3.1 Item

Logic

	condition	description
3.1.1	active	First item active onLoad unless author overrides. Mirrors tabs' 2 active state as user interacts. Only one active item at a time.

Back to top