Docs
Changed on:
13 Dec 2023
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.
Initial changelog entry.
fc.tabs.card
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`By default, the active tab is referred to by its index number (
`0``1``urlValue`When using deep-linking, you will see
`?[urlKey]=[index | urlValue]``urlKey`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. |
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. |
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
First release
None
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
