mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 15:06:48 -04:00
feat(tabs): implement synchronized tabs switching (#700)
* Sync tabs across groups * feat(tabs): add optional synchronization * Move tabs sync setting under page params * fix: spacing between title and site title (#704) * docs: document configure opengraph image (#706) * [Docs] document using og:image * Make example title page match others * clarify wording * chore: update tailwind css to latest version 4.1.8 (#703) * fix: wrong SRI hash for katex.css (#702) * Correct URL given in 'dev.toml' * stylesheet 'katex.css': fix SRI hash * fix(build): run npm update to fix postcss complaint * feat(tags): improve usability of tags (#698) * feat(tags): improve usability of tags * Tags can be shown also at docs * Documented tag-related config flags * Added example tags to the site * Made rendered tags active * Move tags listing to ToC * Hide tags section on no tags * feat(math): add optional MathJax support (#707) * feat: add MathJax option * docs: move math engine note * refactor: update LaTeX documentation and improve MathJax integration - Adjusted LaTeX documentation for clarity and formatting. - Enhanced MathJax configuration in the templates to support both KaTeX and MathJax rendering. - Removed deprecated comments and streamlined the script loading process for MathJax. - Updated the passthrough extension settings in the Hugo configuration for better compatibility with LaTeX math expressions. * docs: simplify LaTeX documentation and clarify configuration steps - Updated LaTeX documentation to reflect that KaTeX is enabled by default, removing the need for manual activation. - Added examples for using LaTeX math expressions and clarified the configuration for the passthrough extension in Hugo. - Enhanced MathJax section to emphasize its use as an alternative rendering engine. * fix(tabs): add null check for panels container and update example items * fix(tabs): improve tab group key handling and add validation for items parameter * refactor(tabs): comment out sync option in configuration and adjust tab formatting in documentation --------- Co-authored-by: hobobandy <30026704+hobobandy@users.noreply.github.com> Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com> Co-authored-by: Andreas Deininger <adeininger@urbanonline.de> Co-authored-by: yuri <1969yuri1969@gmail.com>
This commit is contained in:
@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
|
||||
|
||||
## Example
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
|
||||
{{< tab >}}**macOS**: A desktop operating system by Apple.{{< /tab >}}
|
||||
{{< tab >}}**Linux**: An open-source operating system.{{< /tab >}}
|
||||
{{< tab >}}**Windows**: A desktop operating system by Microsoft.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -91,3 +91,35 @@ Markdown syntax including code block is also supported:
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /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` under the `page` section:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: 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 */>}}
|
||||
```
|
||||
|
Reference in New Issue
Block a user