1. Demo AstrolTabs

Each AstrolContentTab is a tab: its Title (with optional Icon and Badge) goes in the list and its content in the panel. With focus on the list, the arrows, Home and End change tab and skip disabled ones.

@using Astrol.Component.Basic.Tabs

<AstrolTabs @bind-ActiveTabIndex="active" AriaLabel="Customer">

 <AstrolContentTab Title="General" Icon="astrol-user">

 <p>Name, email and phone...</p>

 </AstrolContentTab>

 <AstrolContentTab Title="Orders" Icon="astrol-basket" Badge="3">

 <p>The last orders...</p>

 </AstrolContentTab>

 <AstrolContentTab Title="Billing" Icon="astrol-credit-card" Disabled="true">

 ...

 </AstrolContentTab>

</AstrolTabs>

@code {

 private int active;

}

2. Buttons and panels that keep their state

Pills shows the tabs as buttons. By default only the active panel exists; with KeepAlive the others stay hidden in the page and keep what was typed: type something, switch tab and come back.

@* Pills: buttons instead of underline. KeepAlive: hidden tabs keep what was typed *@

<AstrolTabs Pills="true" KeepAlive="true">

 <AstrolContentTab Title="Notes">

 <AstrolContentInput><textarea></textarea></AstrolContentInput>

 </AstrolContentTab>

 <AstrolContentTab Title="Preview">...</AstrolContentTab>

</AstrolTabs>

Supported parameters

AstrolTabs

• ActiveTabIndex (int), active tab from 0; binds with @bind-ActiveTabIndex (default 0).
• Pills (bool), tabs as rounded buttons (default false, underlined).
• KeepAlive (bool), keeps inactive panels hidden so they keep their state (default false).
• AriaLabel (string), accessible text of the tab list.
• Class (string), extra css class.
• SelectAsync(int) (method), activates a tab from code.

AstrolContentTab

• Title (string), tab text.
• Icon (string), astrol-* icon (optional).
• Badge (string), short text next to the title, e.g. a counter (optional).
• Disabled (bool), disabled tab (default false).
• ChildContent (RenderFragment), panel content.

Tabs follow the order in which they are created; one that appears later (inside an @if) is added at the end.