Documentation
¶
Overview ¶
Package tabs provides tab components following shadcn/ui patterns. Tabs use Alpine.js for state management and support keyboard navigation.
Index ¶
- func Tab(id string, label g.Node, opts ...TabOption) g.Node
- func TabList(children ...g.Node) g.Node
- func TabListWithOptions(opts []TabListOption, children ...g.Node) g.Node
- func TabPanel(id string, content ...g.Node) g.Node
- func Tabs(children ...g.Node) g.Node
- func TabsWithOptions(opts []Option, children ...g.Node) g.Node
- type Option
- type Orientation
- type TabListOption
- type TabListProps
- type TabListVariant
- type TabOption
- func WithActive(active bool) TabOption
- func WithAttr(attr g.Node) TabOption
- func WithGrow() TabOption
- func WithHref(href string) TabOption
- func WithShrink() TabOption
- func WithTabAttrs(attrs ...g.Node) TabOption
- func WithTabClass(class string) TabOption
- func WithTabVariant(variant TabVariant) TabOption
- type TabProps
- type TabVariant
- type TabsProps
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func Tab ¶
Tab creates an individual tab button or link Tabs default to natural width (sized to content). Use WithGrow() for equal width distribution.
Example:
tabs.Tab("overview", g.Text("Overview"))
With custom options:
tabs.Tab("overview", g.Text("Overview"),
tabs.WithHref("/overview"),
tabs.WithTabClass("custom-class"),
tabs.WithGrow(), // Equal width distribution
tabs.WithActive(true),
tabs.WithAttr(g.Attr("data-testid", "overview-tab")),
)
func TabList ¶
TabList creates a wrapper for tab buttons
Example:
tabs.TabList(
tabs.Tab("tab1", g.Text("Tab 1")),
tabs.Tab("tab2", g.Text("Tab 2")),
)
With scrollable option for many tabs:
tabs.TabList(
tabs.Tab("tab1", g.Text("Tab 1")),
tabs.Tab("tab2", g.Text("Tab 2")),
tabs.WithScrollable(),
)
With equal width distribution:
tabs.TabList(
tabs.Tab("tab1", g.Text("Tab 1"), tabs.WithGrow()),
tabs.Tab("tab2", g.Text("Tab 2"), tabs.WithGrow()),
)
func TabListWithOptions ¶ added in v0.0.8
func TabListWithOptions(opts []TabListOption, children ...g.Node) g.Node
TabListWithOptions creates a tab list with custom options
func TabPanel ¶
TabPanel creates a content panel for a tab
Example:
tabs.TabPanel("overview", g.Text("Overview content here"))
func Tabs ¶
Tabs creates a tabs container with Alpine.js state management
IMPORTANT: Use WithDefaultTab to set the initially active tab
Example:
tabs.TabsWithOptions(
[]tabs.Option{tabs.WithDefaultTab("overview")},
tabs.TabList(
tabs.Tab("overview", g.Text("Overview")),
tabs.Tab("details", g.Text("Details")),
),
tabs.TabPanel("overview", g.Text("Overview content")),
tabs.TabPanel("details", g.Text("Details content")),
)
Types ¶
type Option ¶
type Option func(*TabsProps)
Option is a functional option for configuring tabs
func WithDefaultTab ¶
WithDefaultTab sets the initially active tab
func WithOrientation ¶
func WithOrientation(o Orientation) Option
WithOrientation sets the tab orientation
type Orientation ¶
type Orientation string
Orientation defines tab layout direction
const ( OrientationHorizontal Orientation = "horizontal" OrientationVertical Orientation = "vertical" )
type TabListOption ¶ added in v0.0.8
type TabListOption func(*TabListProps)
TabListOption is a functional option for configuring tab list
func WithScrollable ¶ added in v0.0.8
func WithScrollable() TabListOption
WithScrollable enables horizontal scrolling for overflow tabs
func WithTabListAttrs ¶ added in v0.0.8
func WithTabListAttrs(attrs ...g.Node) TabListOption
WithTabListAttrs adds custom attributes to the tab list
func WithTabListClass ¶ added in v0.0.8
func WithTabListClass(class string) TabListOption
WithTabListClass adds custom classes to the tab list
func WithTabListVariant ¶ added in v0.0.8
func WithTabListVariant(variant TabListVariant) TabListOption
WithTabListVariant sets the visual style of the tab list
type TabListProps ¶ added in v0.0.8
type TabListProps struct {
Variant TabListVariant
Scrollable bool
Class string
Attrs []g.Node
}
TabListProps defines tab list configuration
type TabListVariant ¶ added in v0.0.8
type TabListVariant string
TabListVariant defines the visual style of the tab list
const ( TabListVariantDefault TabListVariant = "default" // Boxed style with background TabListVariantUnderline TabListVariant = "underline" // Minimal with bottom border TabListVariantPills TabListVariant = "pills" // Rounded pill style )
type TabOption ¶ added in v0.0.8
type TabOption func(*TabProps)
TabOption is a functional option for configuring individual tabs
func WithActive ¶ added in v0.0.8
WithActive marks the tab as initially active
func WithGrow ¶ added in v0.0.8
func WithGrow() TabOption
WithGrow adds flex-1 class for equal width distribution By default, tabs size naturally to their content.
func WithShrink ¶ added in v0.0.8
func WithShrink() TabOption
WithShrink removes flex-1 class for natural width sizing Deprecated: No longer needed. Tabs now default to natural width. Use WithGrow() if you want equal width distribution.
func WithTabAttrs ¶ added in v0.0.8
WithTabAttrs adds custom attributes to the tab
func WithTabClass ¶ added in v0.0.8
WithTabClass adds custom classes to the tab
func WithTabVariant ¶ added in v0.0.8
func WithTabVariant(variant TabVariant) TabOption
WithTabVariant sets the visual style of the tab
type TabProps ¶ added in v0.0.8
type TabProps struct {
Variant TabVariant
Href string
Class string
Attrs []g.Node
Shrink bool // Deprecated: No longer needed, tabs default to natural width
Grow bool // Add flex-1 for equal width distribution
Active bool
}
TabProps defines individual tab configuration
type TabVariant ¶ added in v0.0.8
type TabVariant string
TabVariant defines the visual style of individual tabs
const ( TabVariantDefault TabVariant = "default" // Boxed style matching default list TabVariantUnderline TabVariant = "underline" // Minimal with bottom border TabVariantPills TabVariant = "pills" // Rounded pill style )
Source Files