Tabs

Tabbed content panels

1 min read 118 words

Display content in tabbed panels.

Basic Usage

:::{tab-set}

:::{tab-item} Python
```python
print("Hello, World!")
```
:::{/tab-item}

:::{tab-item} JavaScript
```javascript
console.log("Hello, World!");
```
:::{/tab-item}

:::{/tab-set}

Synchronized Tabs

Tabs with the samesynckey stay synchronized:

:::{tab-set}
:sync: lang

:::{tab-item} Python
:sync: python
Python content.
:::{/tab-item}

:::{tab-item} JavaScript
:sync: javascript
JavaScript content.
:::{/tab-item}

:::{/tab-set}

Tab-Set Options

Option Type Description
class string Additional CSS classes
sync string Sync group key

Tab-Item Options

Option Type Description
sync string Sync key within group
selected bool Initially selected tab