Vis et helt team på lidt plads. Overlappende avatarer foldes sammen til et +n-mærke, når flere end din grænse vises.
Hvorfor det hjælper
- Overlappende avatarer
- +n for resten
- Hint med navne
Hvor det passer
- Projekter
- Teams
- Delte elementer
Eksempel
<Stack Direction="StackDirection.Column" Align="flex-start">
<AvatarGroup Items="_people" Label="Project members" />
<AvatarGroup Items="_people" Max="2" Size="Size.Small" Label="Project members (short)" />
<AvatarGroup Items="_people.Take(3)" Size="Size.Large" Label="Three members" />
</Stack>
@code {
private readonly AvatarItem[] _people =
[
new("Ada Lovelace"), new("Grace Hopper"), new("Linus Torvalds"), new("Margaret Hamilton"), new("Alan Turing"), new("Barbara Liskov")
];
}Et kort uddrag. Tilføj @using RayCraft.Blazor.Components til din side, og brug en interaktiv gengivelsestilstand.
Inkluderet i RayCraft Free. Fungerende eksempler findes i GitHub-lager (MIT); det indeholder eksempel- og demokode, ikke bibliotekets kode.