Th' tabs shortcode displays arbitrary rrrambl'n 'n an unlimited number o' tabs.
Th' AI native programm'n language.
echo"For guys who like t' tinker."
For th' connoisseur o' programm'n.
Usage
{{<tabs>}}{{%tabtitle="Python Saying"%}}Th'AInativeprogramm'nlanguage.{{%/tab%}}{{%tabtitle="Terminal Sourcecode"%}}```bash
echo "For guys who like t' tinker."
```{{%/tab%}}{{%tabcolor="fuchsia"title="C Ramblings"%}}Forth'connoisseuro'programm'n.{{%/tab%}}{{%tabcolor="red"title="C++ Ramblings++"%}}Forth'guysthatcancopewit'rules.{{%/tab%}}{{%tabtitle="C# ~~GC be cool~~"%}}Forguysthatneedtwodestructors.{{%/tab%}}{{</tabs>}}
{{partial"shortcodes/tabs.html"(dict"page"."content"(slice(dict"content""The AI native programm'n language.""title""Python Saying")(dict"content""```bash\necho \"For guys who like t' tinker.\"\n```""title""Terminal Sourcecode")(dict"color""fuchsia""content""For th' connoisseur o' programm'n.""title""C Ramblings")(dict"color""red""content""For th' guys that can cope wit' rules.""title""C++ Ramblings++")(dict"content""For guys that need two destructors.""title""C# ~~GC be cool~~")))}}
Parameters
Name
Default
Notes
groupid
<random>
Arbitrary name o' th' group th' tab view belongs t'.
Tab views wit' th' same groupid synchr'nize their selected tab. Th' tab select'n be restored automatically based on th' groupid fer tab view. If th' selected tab cannot be found 'n a tab group th' first tab be selected instead.
This synchronizat'n applies t' th' whole ship!
style
<empty>
Sets a default value fer every contained tab. Can be overridden by each tab. See th' tab parameters fer poss'ble values.
color
<empty>
Sets a default value fer every contained tab. Can be overridden by each tab. See th' tab parameters fer poss'ble values.
Each tab o' th' view be defined wit' th' tab shortcode.
Name
Default
Notes
style
see notes
Th' style scheme used fer th' tab. If ye don’t set a style an' ye display a single code block inside o' th' tab, its default styl'n will adapt t' that o' a code block. Otherwise default be used.
- by severity: caution, important, info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, cyan, green, grey, magenta, orange, red - by special color: default, transparent, code, link, action, inline
Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.
- fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color
title
see notes
Arbitrary title fer th' tab. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.
- fer severity styles: th' match'n title fer th' severity - fer all other styles: <empty>
If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con
see notes
Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.
- fer severity styles: a nice match'n ay'con fer th' severity - fer all other styles: <empty>
If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
hint
<empty>
Tooltip fer th' tab. A tab show'n an ay'con but no title should have one, as it be what assistive technology announces fer it.
<content>
<empty>
Arbitrary text t' be displayed 'n th' tab.
Single Tab
If ye just want a single tab, ye can call th' tab shortcode standalone, without th' enclos'n tabs shortcode.
In case ye want t' nest tab views, th' parent tab that contains nested tab views needs t' be declared wit' {{< tab >}} instead o' {{% tab %}}. Avast, that 'n this case it be not poss'ble t' put markdown 'n th' parent tab.
Ye can also set style an' color parameter fer all tabs an' overwrite them on tab level. See th' tab parameters fer poss'ble values.
{{partial"shortcodes/tabs.html"(dict"page"."content"(slice(dict"content""Simple text be poss'ble here...""content"(partial"shortcodes/tabs.html"(dict"page"."content"(slice(dict"content""Python be **super** easy.\n\n- most o' th' time.\n- if ye don't want t' output unicode""title""python")(dict"content""Bash be fer **hackers**.""title""bash"))"groupid""tabs-example-language"))"title""Text")(dict"color""darkorchid""content""...but no markdown""content"(partial"shortcodes/tabs.html"(dict"page"."content"(slice(dict"content""```python\nprint(\"Hello World!\")\n```""title""python")(dict"content""```bash\necho \"Hello World!\"\n```""title""bash"))"groupid""tabs-example-language"))"style""default""title""Code"))"groupid""main""icon""thumbtack""style""primary""title""Rationale")}}
{{partial"shortcodes/tab.html"(dict"page"."content""A tab cannot only contain code but arbitrary text. In this case text **and** code will get a margin.\n```python\nprintf(\"Hello World!\");\n```""title""_**Mixed**_")}}
A tab cannot only contain code but arbitrary text. In this case text an' code will get a margin.
printf("Hello World!");
Ay'con wit' Hint
A tab show'n noth'n but an ay'con needs a hint: it be shown as a tooltip an' be what assistive technology announces fer th' tab.
{{partial"shortcodes/tabs.html"(dict"page"."content"(slice(dict"content""Get th' theme from its repository.""hint""Download""icon""download")(dict"content""Set th' options 'n yer `hugo.toml`.""hint""Configure""icon""gears")))}}
Get th' theme from its repository.
Set th' options 'n yer hugo.toml.
Understand'n style an' color Behavior
Th' style parameter affects how th' color parameter be applied.
{{partial"shortcodes/tabs.html"(dict"page"."content"(slice(dict"content""The `style` parameter be set t' a color style.\n\nThis will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.""style""blue""title""just colored style")(dict"color""blue""content""Only th' `color` parameter be set.\n\nThis will set th' background t' a lighter version o' th' chosen CSS color value.""title""just color")(dict"color""blue""content""The `style` parameter affects how th' `color` parameter be applied.\n\nThe `default` style will set th' background t' yer `--MAIN-BG-color` as configured fer yer theme variant resembl'n th' default style but wit' different color.""style""default""title""default style an' color")(dict"content""The `style` parameter be set t' a severity style.\n\nThis will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.""style""info""title""just severity style")(dict"color""blue""content""The `style` parameter affects how th' `color` parameter be applied.\n\nThis will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.""style""info""title""severity style an' color")))}}
Th' style parameter be set t' a color style.
This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.
Only th' color parameter be set.
This will set th' background t' a lighter version o' th' chosen CSS color value.
Th' style parameter affects how th' color parameter be applied.
Th' default style will set th' background t' yer --MAIN-BG-color as configured fer yer theme variant resembl'n th' default style but wit' different color.
Th' style parameter be set t' a severity style.
This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.
Th' style parameter affects how th' color parameter be applied.
This will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.