Tabs

Tabs let users switch between alternative views in the same place, for example different languages or OS-specific steps. :tabs is a container that holds one or more :tab containers. Both are container-only directives.

tabs properties: activeTabId (string, id of the tab shown first), variant (default | container, default default), groupId (string, synchronizes selection across tab groups with the same id).

tab properties: id (string, needed to target it with activeTabId), label (string, shown in the UI), disabled (boolean, default false).

Basic

Rendered:

Content for tab 1

Source:

1
2
3
4
5
6
7
8
9
10
11
::::tabs
:::tab
Content for tab 1
:::
:::tab
Content for tab 2
:::
:::tab
Content for tab 3
:::
::::

Container variant

Rendered:

Source:

1
2
3
4
5
6
7
8
::::tabs{variant="container"}
:::tab
Content for tab 1
:::
:::tab
Content for tab 2
:::
::::

Labels and a default active tab

Set id and label on each tab, then point activeTabId at the one to open first.

Rendered:

Source:

1
2
3
4
5
6
7
8
9
10
11
::::tabs{variant="container" activeTabId="vue"}
:::tab{id="react" label="React"}
React content
:::
:::tab{id="angular" label="Angular"}
Angular content
:::
:::tab{id="vue" label="Vue"}
Vue content
:::
::::

Disabled tab

Rendered:

Source:

1
2
3
4
5
6
7
8
9
10
11
::::tabs{variant="container"}
:::tab{id="react" label="React"}
React content
:::
:::tab{id="angular" label="Angular" disabled=true}
Angular content
:::
:::tab{id="vue" label="Vue"}
Vue content
:::
::::

Synchronized tab groups

Give two tab groups the same groupId and selecting a tab in one switches the other to the matching label.

Rendered:

Source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
::::tabs{variant="container" groupId=codeSample}
:::tab{label="React"}
React content
:::
:::tab{label="Vue"}
Vue content
:::
::::

::::tabs{variant="container" groupId=codeSample}
:::tab{label="React"}
More React content
:::
:::tab{label="Vue"}
More Vue content
:::
::::

Code inside tabs (deeper nesting)

The outer tabs uses more colons than each tab, which uses more colons than the inner :code container.

Rendered:

Source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:::::tabs{variant="container"}
::::tab{id="python" label="Python"}
```python
def hello_world():
    print('Hello, World!')
```
::::
::::tab{id="go" label="Go"}
```go
package main

import "fmt"

func main() {
    fmt.Println("hello world")
}
```
::::
:::::