1. Demo AstrolTabs

Cada AstrolContentTab es una pestaña: su Title (con Icon y Badge opcionales) va en la lista y su contenido en el panel. Con el foco en la lista, las flechas, Inicio y Fin cambian de pestaña y saltan las desactivadas.

@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. Botones y paneles que conservan su estado

Pills muestra las pestañas como botones. Por defecto solo existe el panel activo; con KeepAlive los demás se quedan ocultos en la página y conservan lo escrito: escriba algo, cambie de pestaña y vuelva.

@* 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>

Parámetros que admite

AstrolTabs

• ActiveTabIndex (int), pestaña activa desde 0; se enlaza con @bind-ActiveTabIndex (por defecto 0).
• Pills (bool), pestañas como botones redondeados (por defecto false, subrayadas).
• KeepAlive (bool), mantiene ocultos los paneles inactivos para que conserven su estado (por defecto false).
• AriaLabel (string), texto accesible de la lista de pestañas.
• Class (string), clase css adicional.
• SelectAsync(int) (método), activa una pestaña desde código.

AstrolContentTab

• Title (string), texto de la pestaña.
• Icon (string), icono astrol-* (opcional).
• Badge (string), texto corto junto al título, p. ej. un contador (opcional).
• Disabled (bool), pestaña desactivada (por defecto false).
• ChildContent (RenderFragment), contenido del panel.

Las pestañas siguen el orden en que se crean; si una aparece más tarde (dentro de un @if), se añade al final.