Drawer

Een zijpaneel voor navigatie of details. Het kan over de pagina zweven, sluiten met Esc of als smalle pictogramrail blijven staan wanneer het gesloten is.

Waarom het helpt

• Tijdelijk of permanent
• Optie voor pictogramrail
• Focus wordt voor je afgehandeld

Waar het past

• Hoofdnavigatie
• Filters
• Detailpanelen

Voorbeeld

<Button OnClick="() => _open = true">Open drawer</Button>

<Drawer @bind-Open="_open" Title="Navigation">
    <Stack Direction="StackDirection.Column" Spacing="1">
        <Button Variant="Variant.Text">Dashboard</Button>
        <Button Variant="Variant.Text">Settings</Button>
    </Stack>
</Drawer>

@code {
    private bool _open;
}

Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.

Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.

Alle besturingselementen · Documentatie