Tabs | RiseUI

Tab list and panels with primary/secondary variants and vertical layout — aligned with @heroui/react Tabs and tabs.css.

Usage

Horizontal default variant: `RiseThemeData.muted` list, `RiseThemeData.surface` segment + surface shadow, `text-sm` labels; `mt-4` gap before panel.

RiseTabs(
  tabViewHeight: 140,
  tabs: const [
    Tab(text: 'Overview'),
    Tab(text: 'Analytics'),
    Tab(text: 'Reports'),
  ],
  children: const [
    Text('Overview panel'),
    Text('Analytics panel'),
    Text('Reports panel'),
  ],
)

Vertical

Default variant vertical strip — same segment pill + shadow as horizontal.

RiseTabs(
  orientation: RiseTabsOrientation.vertical,
  variant: RiseTabsVariant.default_,
  tabViewHeight: 200,
  tabs: const [
    Tab(text: 'Account'),
    Tab(text: 'Security'),
  ],
  children: const [Text('Account'), Text('Security')],
)

Disabled tab

One tab cannot be selected.

RiseTabs(
  tabViewHeight: 140,
  tabEnabled: const [true, false, true],
  tabs: const [
    Tab(text: 'Active'),
    Tab(text: 'Disabled'),
    Tab(text: 'Available'),
  ],
  children: const [Text('A'), Text('B'), Text('C')],
)

Custom styles

Same default segment chrome as Usage, but `labelStyle` (12px semibold, wider tracking), `labelColor: rise.accent` for the selected tab, and `initialIndex: 1` — Daily / Weekly / Bi-Weekly / Monthly.

RiseTabs(
  tabViewHeight: 140,
  initialIndex: 1,
  labelColor: rise.accent,
  labelStyle: const TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w600,
    letterSpacing: 0.35,
    height: 16 / 12,
  ),
  tabs: const [
    Tab(text: 'Daily'),
    Tab(text: 'Weekly'),
    Tab(text: 'Bi-Weekly'),
    Tab(text: 'Monthly'),
  ],
  children: const [Text('…'), Text('…'), Text('…'), Text('…')],
)

Secondary variant

`.tabs--secondary`: transparent list, `border-border` rule, `bg-accent` 2px indicator.

RiseTabs(
  variant: RiseTabsVariant.secondary,
  tabViewHeight: 140,
  tabs: const [
    Tab(text: 'Overview'),
    Tab(text: 'Analytics'),
  ],
  children: const [Text('…'), Text('…')],
)

Secondary vertical

Left border on list; accent vertical stroke on the selected tab.

RiseTabs(
  variant: RiseTabsVariant.secondary,
  orientation: RiseTabsOrientation.vertical,
  tabViewHeight: 200,
  tabs: const [
    Tab(text: 'Account'),
    Tab(text: 'Billing'),
  ],
  children: const [Text('…'), Text('…')],
)

Scrollable

Many tabs in the secondary style.

RiseTabs(
  variant: RiseTabsVariant.secondary,
  isScrollable: true,
  tabAlignment: TabAlignment.start,
  tabViewHeight: 120,
  tabs: const [
    Tab(text: 'Overview'),
    Tab(text: 'Analytics'),
    Tab(text: 'Reports'),
    Tab(text: 'Team'),
  ],
  children: const [Text('…'), Text('…'), Text('…'), Text('…')],
)