feat(tabs): add optional synchronization

This commit is contained in:
Xin
2025-06-08 11:51:20 +01:00
parent 43c930f1ac
commit cf4d334da3
3 changed files with 44 additions and 1 deletions

View File

@ -13,6 +13,41 @@ next: /docs/guide/deploy-site
{{< /tabs >}}
### Sync Tabs
Tabs with the same list of `items` can be synchronized. When enabled, selecting a tab updates all other tabs with the same `items` and remembers the selection across pages.
Enable globally in your `hugo.yaml`:
```yaml {filename="hugo.yaml"}
params:
tabs:
sync: true
```
Or enable it for a single page in the front matter:
```yaml {filename="content/docs/my-page.md"}
---
title: My Page
tabsSync: true
---
```
With this enabled the following two tab blocks will always display the same selected item:
```markdown
{{</* tabs items="A,B" */>}}
{{</* tab */>}}A content{{</* /tab */>}}
{{</* tab */>}}B content{{</* /tab */>}}
{{</* /tabs */>}}
{{</* tabs items="A,B" */>}}
{{</* tab */>}}Second A content{{</* /tab */>}}
{{</* tab */>}}Second B content{{</* /tab */>}}
{{</* /tabs */>}}
```
## Usage
### Default

View File

@ -184,6 +184,9 @@ params:
# hover | always
display: hover
tabs:
sync: true
comments:
enable: false
type: giscus