Ir para o conteúdo
LAYOUT · FREE

Collapse

Mostre detalhes só quando os usuários pedirem.

Mostre ou oculte conteúdo sob demanda. Vincule a qualquer botão e mantenha o conteúdo na página enquanto oculto, se precisar.

Por que ajuda

  • Funciona com qualquer botão
  • Conteúdo mantido carregado
  • Simples

Onde se encaixa

  • Opções avançadas
  • Detalhes
  • Filtros
O controle Collapse em uma página do RayCraft

Exemplo

<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;
}

Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.

Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.

Todos os controles ยท Documentação