Zeigen Sie ein ganzes Team auf kleinem Raum. Überlappende Avatare werden zu einem +n-Abzeichen, sobald mehr als Ihr Limit angezeigt werden.
Warum es hilft
- Überlappende Avatare
- +n für den Rest
- Hinweise mit Namen
Wo es passt
- Projekte
- Teams
- Geteilte Elemente
Beispiel
<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")
];
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.