Loddrette lister med ikon, to tekstlinjer og en avsluttende handling på hver rad, med elementer som blir lenker eller knapper.
Hvorfor det hjelper
- Ikoner og to linjer
- Lenker eller knapper
- Handlinger
Hvor det passer
- Menyer
- Innbokser
- Innstillinger
Eksempel
<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";
}Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.
Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.