Tabs

A set of layered sections of content — known as tab panels — that are displayed one at a time.

Default

Click tabs to switch between panels.

Account settings

Make changes to your account here.

Password settings

Change your password here.

Multiple tabs

Tabs with three panels.

Overview of your project metrics and recent activity.

Detailed analytics and performance data.

Generated reports and exportable summaries.

Usage

julia

using Suite

Tabs(default_value="account",
    TabsList(
        TabsTrigger("Account", value="account"),
        TabsTrigger("Password", value="password"),
    ),
    TabsContent(value="account",
        P("Account settings content"),
    ),
    TabsContent(value="password",
        P("Password settings content"),
    ),
)

Keyboard Interactions

Key	Action
`Tab`	Enter/exit the tab list
`Arrow Right`	Focus next tab (horizontal)
`Arrow Left`	Focus previous tab (horizontal)
`Arrow Down`	Focus next tab (vertical)
`Arrow Up`	Focus previous tab (vertical)
`Home`	Focus first tab
`End`	Focus last tab

API Reference

Tabs

Prop	Type	Default	Description
default_value	String	nothing	Initially active tab value
orientation	String	"horizontal"	"horizontal" or "vertical"
activation_mode	String	"automatic"	"automatic" or "manual"
class	String	""	Additional CSS classes

TabsList

Prop	Type	Default	Description
loop	Bool	true	Arrow keys wrap around at ends
class	String	""	Additional CSS classes

TabsTrigger

Prop	Type	Default	Description
value	String	""	Unique tab identifier (required)
disabled	Bool	false	Disable this tab
children...	Any	-	Tab label content
class	String	""	Additional CSS classes

TabsContent

Prop	Type	Default	Description
value	String	""	Matching tab identifier (required)
children...	Any	-	Panel content
class	String	""	Additional CSS classes