Saltar al contenido
DISEÑO · FREE

Collapse

Muestra los detalles solo cuando los usuarios los piden.

Muestra u oculta contenido a petición. Enlázalo a cualquier botón y mantén el contenido en la página mientras está oculto si lo necesitas.

Por qué ayuda

  • Funciona con cualquier botón
  • Contenido siempre montado
  • Sencillo

Dónde encaja

  • Opciones avanzadas
  • Detalles
  • Filtros
El control Collapse en una página de RayCraft

Ejemplo

<Button Variant="Variant.Outlined" OnClick="@(() => _open = !_open)" aria-expanded="@(_open ? "true" : "false")" aria-controls="@(_open ? "collapse-demo" : null)">
    @(_open ? "Hide details" : "Show details")
</Button>
<Collapse Expanded="_open" id="collapse-demo">
    <Card>Details that appear and disappear. The content is not rendered while collapsed.</Card>
</Collapse>

@code {
    private bool _open;
}

Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.

Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.

Todos los controles ยท Documentación