Tabs Tabbed content with the new compositional TabsList, TabsTrigger, and TabsContent subcomponents.
v0.3.0-alpha.2 adds TabsList, TabsTrigger, and TabsContent subcomponents. The old Items / TabItems data-driven API still works, but the compositional pattern is now recommended for full markup control.
v0.2.1 v0.3.0-alpha.2 <Tabs Items="@tabs" ActiveTab="@tab" ActiveTabChanged="..." /><Tabs @bind-Value="tab"><TabsList>...</TabsList><TabsContent ...>Tab content via TabItem.Content <TabsContent Value="..."> children
tabs-list, tabs-trigger, and tabs-content are auto-installed as dependencies.
< Tabs @bind-Value = "_tab" > < TabsList > < TabsTrigger Value = "account" >Account</ TabsTrigger > < TabsTrigger Value = "password" >Password</ TabsTrigger > < TabsTrigger Value = "notifications" >Notifications</ TabsTrigger > </ TabsList > < TabsContent Value = "account" > < div class = "space-y-3 pt-4" > < h3 class = "text-sm font-medium" >Account settings</ h3 > < Input Placeholder = "Display name" /> </ div > </ TabsContent > < TabsContent Value = "password" > < div class = "space-y-3 pt-4" > < h3 class = "text-sm font-medium" >Change password</ h3 > < Input Type = "password" Placeholder = "Current password" /> < Input Type = "password" Placeholder = "New password" /> </ div > </ TabsContent > < TabsContent Value = "notifications" > < div class = "pt-4 text-sm text-muted-foreground" > Manage your notification preferences. </ div > </ TabsContent > </ Tabs > @code { private string _tab = "account" ; } < Tabs @bind-Value = "_tab" > < TabsList > < TabsTrigger Value = "overview" >Overview</ TabsTrigger > < TabsTrigger Value = "analytics" >Analytics</ TabsTrigger > < TabsTrigger Value = "reports" Disabled = "true" >Reports</ TabsTrigger > </ TabsList > < TabsContent Value = "overview" >< p >Overview content</ p ></ TabsContent > < TabsContent Value = "analytics" >< p >Analytics content</ p ></ TabsContent > < TabsContent Value = "reports" >< p >Reports content</ p ></ TabsContent > </ Tabs > @code { private string _tab = "overview" ; } Set the initial @bind-Value to the desired tab Value:
< Tabs @bind-Value = "_tab" > < TabsList > < TabsTrigger Value = "a" >A</ TabsTrigger > < TabsTrigger Value = "b" >B</ TabsTrigger > </ TabsList > < TabsContent Value = "a" >Content A</ TabsContent > < TabsContent Value = "b" >Content B</ TabsContent > </ Tabs > @code { private string _tab = "b" ; } @* "b" is active on load *@ Parameter Type Default Description Valuestring""Active tab value (use @bind-Value) ValueChangedEventCallback<string>— Fired when active tab changes Classstring?nullAdditional CSS classes ChildContentRenderFragment— TabsList + TabsContent elements
Parameter Type Default Description ChildContentRenderFragment— TabsTrigger children
Parameter Type Default Description Valuestring— Unique identifier matching a TabsContent DisabledboolfalsePrevents selection ChildContentRenderFragment— Tab label
Parameter Type Default Description Valuestring— Shown when parent Tabs.Value matches ChildContentRenderFragment— Panel content
