Eine Glocke mit der Zahl ungelesener Benachrichtigungen und einem Panel, das sie auflistet, in dem Menschen sie lesen oder verwerfen können.
Warum es hilft
- Zahl ungelesener
- Panel mit Benachrichtigungen
- Lesen und verwerfen
Wo es passt
- App-Kopfbereiche
- Portale
- Dashboards
Beispiel
<div style="display:flex;justify-content:flex-end">
<NotificationCenter Items="_items" OnItemClick="Clicked" />
</div>
<p>@_message</p>
@code {
private string _message = "Open the bell, read a notification or dismiss one.";
private readonly List<NotificationItem> _items =
[
new() { Title = "Deployment finished", Message = "Version 2.4 is live in production.", Severity = Severity.Success, Time = DateTime.Now.AddMinutes(-4) },
new() { Title = "Disk space is low", Message = "The backup volume is 91% full.", Severity = Severity.Warning, Time = DateTime.Now.AddHours(-2) },
new() { Title = "Payment failed", Message = "Invoice 10482 could not be charged.", Severity = Severity.Error, Time = DateTime.Now.AddHours(-5) },
new() { Title = "New teammate", Message = "Maria Georgieva joined the Design team.", Severity = Severity.Info, Time = DateTime.Now.AddDays(-1), Read = true }
];
private void Clicked(NotificationItem item) => _message = $"Opened: {item.Title}";
}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.