Aller au contenu
MISE EN PAGE · FREE

Collapse

Montrez les détails uniquement quand les utilisateurs le demandent.

Affichez ou masquez du contenu à la demande. Liez-le à n’importe quel bouton et gardez le contenu dans la page quand il est masqué si nécessaire.

Pourquoi c’est utile

  • Fonctionne avec tout bouton
  • Contenu conservé en mémoire
  • Simple

Où il trouve sa place

  • Options avancées
  • Détails
  • Filtres
Le contrôle Collapse dans une page RayCraft

Exemple

<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 court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.

Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.

Tous les contrôles ยท Documentation