Life's a garden. Dig it.
You can use tabs to organize content into separate, tabbed sections.
My wife asked me to put ketchup on the shopping list. Now I can't read anything.
The thief who stole my iPhone could face time.
I was gonna tell a time travelling joke but y'all didn't like it.
Basic use¶
Tabs are colocated inside of a parent tab group container.
- Define a tab group using the
::::tabsdirective. - Define tabs using the
:::tabdirective.
::::tabs
:::tab[Label A]
A is the first letter of the English alphabet.
:::
:::tab[Label B]
B is the second letter of the English alphabet.
:::
::::
A is the first letter of the English alphabet.
B is the second letter of the English alphabet.
::::tabs directive uses four colons while each of the :::tab directives use three colons. When nesting container directives, the parent directive should use more colons than its child.Labels¶
Each tab in a tab group should have a distinct label in square brackets []. Labels may use Markdown. For example,
::::tabs
:::tab[`code`]
Lorem ipsum dolor sit amet
:::
:::tab[_italic_]
Ut enim ad minim veniam
:::
::::
Lorem ipsum dolor sit amet
Ut enim ad minim veniam
Syncing tabs across tab groups¶
You can "sync" multiple tab groups using identical tab labels. For example, observe the tab groups below. Click on each label and see how the active tab changes in each group.
Lorem ipsum dolor sit amet
Ut enim ad minim veniam
At vero eos et accusamus et iusto odio dignissimos
Nam libero tempore
Temporibus autem quibusdam et aut officiis
Default Active Tab¶
The first tab in every tab group is the active tab by default. If you want to specify a different default active tab, set the defaultTab property of the ::::tabs directive equal to the label of the tab you want to be open by default.
::::tabs{ defaultTab="Fish" }
:::tab[Dog]
:icon[dog]{ .size-8 .stroke-cyan-700 }
:::
:::tab[Fish]
:icon[fish]{ .size-8 .stroke-red-300 }
:::
:::tab[Rabbit]
:icon[rabbit]{ .size-8 .stroke-zinc-500 .animate-bounce }
:::
:::tab[Turtle]
:icon[turtle]{ .size-8 .stroke-green-700 }
:::
::::