List

Listas verticais com ícone, duas linhas de texto e uma ação ao final de cada linha, com itens que viram links ou botões.

Por que ajuda

• Ícones e duas linhas
• Links ou botões
• Ações

Onde se encaixa

• Menus
• Caixas de entrada
• Configurações

Exemplo

<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";
}

Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.

Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.

Todos os controles · Documentação