NotificationCenter

Een bel met het aantal ongelezen meldingen en een paneel dat ze toont, waar mensen ze kunnen lezen of wegklikken.

Waarom het helpt

• Aantal ongelezen
• Paneel met meldingen
• Lezen en wegklikken

Waar het past

• Toepassingskoppen
• Portalen
• Dashboards

Voorbeeld

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

Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.

Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.

Alle besturingselementen · Documentatie