tab-group

Fragment reference tab-group

tags

ui

Tab groups (tabs) organize content into distinct views. Each tab is a header and its content body in one — no separate tab-panel needed in the DSL.

Usage

Basic tab group with three tabs

puguitab-group wa-tabs-basic

tabs(label="Settings")
  tab(label="General") General content.
  tab(label="Privacy") Privacy content.
  tab(label="Advanced") Advanced content.

Vertical placement

Tab group with vertical side placement

puguitab-group wa-tabs-vertical

tabs(label="Navigation" placement="start")
  tab(label="Overview") Overview content.
  tab(label="Details") Details content.
  tab(label="History") History content.

Disabled tab

Tab group with a disabled tab

puguitab-group wa-tabs-disabled

tabs(label="Example")
  tab(label="Active") Active tab content.
  tab(label="Another") Another tab content.
  tab(label="Disabled" disabled) This tab is disabled.

Attributes — tabs (tab-group)

Name	Type	Default	Description
label	string	-	Accessible label for the group.
placement	top | bottom | start | end	top	Tab strip position.
activation	auto | manual	auto	auto activates on focus; manual requires a click.
no-scroll-controls	boolean	false	Hides scroll arrows when tabs overflow.

Attributes — tab

Name	Type	Default	Description
label	string	-	Tab header text.
disabled	boolean	false	Disables the tab.