Popover

Un panneau flottant pour plus de détails, à portée de main : ouvert par un activateur, fermé avec Échap ou un clic à l’extérieur.

Pourquoi c’est utile

• À portée de main
• Échap et clic extérieur
• Reste dans la fenêtre

Où il trouve sa place

• Détails
• Filtres
• Aide

Exemple

<Popover @bind-Open="_open">
    <Activator><Button Variant="Variant.Outlined">Settings</Button></Activator>
    <ChildContent>
        <Stack Direction="StackDirection.Column">
            <Switch @bind-Value="_notify" Label="Notifications" />
            <Button Size="Size.Small" OnClick="() => _open = false">Done</Button>
        </Stack>
    </ChildContent>
</Popover>

@code {
    private bool _open;
    private bool _notify = true;
}

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