Tab Card Component

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

UI Component

Changed on:

13 Dec 2023

Overview

The tab card is used to put tabs at the top of a group of card-like components (Attributes Card, List Component, etc) and allows users to switch between them. This can help to reduce the number of clicks a user takes when navigating between pages.

The descendants of the Tab Card component are used as the content of the tabs, linked by index. The first descendant will be shown while the first tab is active. For cases where multiple descendants should be shown under a single tab, use the Page Section component (or similar) to group them.

Plugin Name	Core

The standard library of mystique components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.tabs.card

Detailed technical description

Deep-linking

Enabling deep-linking on a Tab Card Component will store the current selected tab in the page URL. When another user visits the URL, they will see the same active tab instead of the default (first) tab.

To enable deep-linking for a Tab Card Component, you must add the

`urlKey`

prop to the Tabs configuration in your manifest. This is the name of the Tab Card Component that will appear in the URL.

By default, the active tab is referred to by its index number (

`0`

for the first tab,

`1`

for the second, etc). However, if the order of tabs may change in the future, or a more human-readable tab name is desired, you may add the optional

`urlValue`

prop to the descendent tabs and provide tab names to use instead of the index number.

When using deep-linking, you will see

`?[urlKey]=[index | urlValue]`

appended to the page URL. Pages with multiple Tab Card Components must use a unique

`urlKey`

for each Tab Card Component.

Properties

*Name*	*Type*	*Required*	*Default*	*Description*
tabs	Tab[]	yes		List of tab definitions to show in the Tab Card.
width	CardWidth	no	"full"	The width of the Tab Card. Note that this component sets up a new internal grid, so descendants of the Tab Card should usually be \"full\" width to avoid unexpected results.
descendants	component or component[]	yes		The descendants of the Tab Card are matched by index to the tabs defined in the tabs prop. So the first descendant shows when the first tab is active.
urlKey	string	no		The name of the Tab Card Component in the URL used for deep-linking.

Tab

*Name*	*Type*	*Required*	*Default*	*Description*
label	string	yes		Text label to show on the tab
urlValue	string	no		The name of an individual tab in the set. If it isn’t set for a particular tab, it uses its index (0+) in the set of tabs.

Configuration example

1{
2    "component": "fc.tabs.card",
3    "props": {
4    "urlKey": "order-status",
5    "tabs": [
6        {
7        "label": "i18n:fc.sf.ui.waves.detail.dashboard.ordersAwaitingPick.title",
8        "urlValue": "order-awaiting"
9        },
10        {
11        "label": "i18n:fc.sf.ui.waves.detail.dashboard.wavesInProgress.title"
12        }
13    ]
14    },
15    "descendants": [
16    {
17        "component": "fc.card.attribute",
18        "props": {
19        "title": "Content matching the first tab",
20        "attributes": [
21            {
22            "label": "Order ref",
23            "value": "HD_3285"
24            }
25        ]
26        }
27    },
28    {
29        "component": "fc.card.attribute",
30        "props": {
31        "title": "Content matching the second tab",
32        "attributes": [
33            {
34            "label": "Order ref",
35            "value": "HD_8965"
36            }
37        ]
38        }
39    }
40    ]
41}

Language: json

Version History

2023-08-01

v0.0.0

First release

Recommended Placement

None