Verticale lijsten met pictogram, twee tekstregels en een afsluitende actie op elke rij, met items die links of knoppen worden.
Waarom het helpt
- Pictogrammen en twee regels
- Links of knoppen
- Acties
Waar het past
- Menu's
- Postvakken
- Instellingen
Voorbeeld
<Stack Align="flex-start" Spacing="6" Wrap="true">
<List Bordered="true" Style="width:100%;max-width:18rem">
<ListItem Icon="IconName.Mail" Text="Inbox" SecondaryText="12 unread" />
<ListItem Icon="IconName.Send" Text="Sent" SecondaryText="Last sent today" />
<ListItem Icon="IconName.Archive" Text="Archive" Disabled="true" OnClick="@(() => { })" />
<ListItem Icon="IconName.Delete" Text="Trash">
<Action><Button Variant="Variant.Text" Size="Size.Small">Empty</Button></Action>
</ListItem>
</List>
<List Bordered="true" Dense="true" Style="width:100%;max-width:18rem">
@foreach (var folder in _folders)
{
<ListItem Text="@folder" Selected="_selected == folder" OnClick="@(() => _selected = folder)" />
}
</List>
</Stack>
@code {
private readonly string[] _folders = ["Projects", "Reports", "Invoices", "Contracts"];
private string _selected = "Reports";
}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.