Tabs

Three variants and an explicit Update contract.

Tab labels in a row; the active one styled by variant. Update must run before anything reads Sel in the same frame — Layout deliberately does NOT process clicks, so a consumer that forgets Update gets dead tabs (impossible to miss) instead of subtle one-frame lag (which survives review).

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add tabs

Usage

The default look: the strip sits in a muted rounded well and the active tab is a raised panel inside it.

open demo ↗

var tabs lotusui.Tabs
tabs.Update(gtx, 2) // BEFORE reading tabs.Sel
tabs.Layout(th, gtx, "Account", "Password")
body := bodies[tabs.Sel] // the account and password cards

Line variant

TabsLine is the classic underline strip: quiet labels, a 2dp brand-ink bar under the active tab, hover pre-shadowed.

open demo ↗

tabs := lotusui.Tabs{Variant: lotusui.TabsLine}

Subtle variant

TabsSubtle renders pill-styled labels without the well — the quietest strip.

open demo ↗

tabs := lotusui.Tabs{Variant: lotusui.TabsSubtle}

Vertical

Vertical stacks the strip as a column — pair it with your content beside it.

open demo ↗

tabs := lotusui.Tabs{Vertical: true}

Icons

Icons, index-aligned with the labels, render before each label in the tab's own ink.

open demo ↗

tabs := lotusui.Tabs{Icons: []string{lotusui.IconFile, lotusui.IconChanges, lotusui.IconSettings}}

Disabled tab

Index-aligned with the labels: a disabled tab dims, drops the pointer cursor, and clicks are skipped by Update.

open demo ↗

tabs := lotusui.Tabs{Disabled: []bool{false, true, false}}

API

Option	Type	Description
`Sel`	`int`	The active tab. Call Update(gtx, n) before reading it in a frame.
`Variant`	`TabsVariant`	TabsDefault (muted well, raised active tab), TabsLine (underline strip), TabsSubtle (pill-styled).
`Vertical`	`bool`	Stacks the strip as a column.
`Icons`	`[]string`	Index-aligned icons rendered before each label.
`Disabled`	`[]bool`	Per-tab disabling, index-aligned with the labels; missing entries are enabled.