Hoppa till innehållet
CONTENT · FREE

AvatarGroup

Visa ett helt team på liten yta, med ett enkelt +n för resten.

Visa ett helt team på liten yta. Överlappande avatarer viks ihop till ett +n-märke när fler än din gräns visas.

Varför det hjälper

  • Överlappande avatarer
  • +n för resten
  • Tips med namn

Var det passar

  • Projekt
  • Team
  • Delade objekt
Kontrollen AvatarGroup på en RayCraft-sida

Exempel

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

Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.

Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.

Alla kontroller ยท Dokumentation