Към съдържанието
ЛЕКИ ДАННИ · FREE

List

Списъци с иконки, два реда текст и действия на всеки ред.

Вертикални списъци с иконка, два реда текст и действие накрая на всеки ред, с елементи, които стават връзки или бутони.

Защо помага

  • Иконки и два реда
  • Връзки или бутони
  • Действия

Къде пасва

  • Менюта
  • Пощенски кутии
  • Настройки
Контролата List в страница на RayCraft

Пример

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

Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.

Включено в RayCraft Free. Работещи примери има в хранилище в GitHub (MIT); то съдържа примерен и демонстрационен код, не кода на библиотеката.

Всички контроли ยท Документация