Notification

TsgcHTMLComponent_Notification — renderize um centro de notificações em dropdown com ícone de sino e um badge de não lidas, construído a partir de uma coleção de itens de notificação, em Delphi, C++ Builder e .NET.

TsgcHTMLComponent_Notification

Um componente de centro de notificações que emite um dropdown do Bootstrap 5. Adicione itens à sua coleção Items (ou chame AddNotification) e então leia a propriedade HTML — o UnreadCount de não lidas alimenta o badge.

Classe do componente

TsgcHTMLComponent_Notification

Renderiza

Markup de dropdown do Bootstrap 5

Linguagens

Delphi, C++ Builder, .NET

Crie, adicione notificações, renderize

Defina Title e MaxVisible, chame AddNotification(title, message, color, timestamp) para cada entrada e então leia HTML. A contagem de não lidas popula o badge automaticamente.

uses
  sgcHTML_Enums, sgcHTML_Component_Notification;

var
  oNotif: TsgcHTMLComponent_Notification;
begin
  oNotif := TsgcHTMLComponent_Notification.Create(nil);
  try
    oNotif.Title := 'Notifications';
    oNotif.MaxVisible := 5;
    oNotif.ShowBadge := True;

    oNotif.AddNotification('New order',
      'Order #1042 was placed.', hcSuccess, '2 min ago');
    oNotif.AddNotification('Payment failed',
      'Invoice #88 could not be charged.', hcDanger, '10 min ago');

    WebModule.Response := oNotif.HTML;   // bell dropdown + badge
  finally
    oNotif.Free;
  end;
end;

// Or add items via the Items collection directly:
with oNotif.Items.Add do
begin
  Title := 'Welcome';
  Message := 'Your account is ready.';
  Color := hcInfo;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Notification.hpp

TsgcHTMLComponent_Notification *oNotif = new TsgcHTMLComponent_Notification(NULL);
try
{
  oNotif->Title = "Notifications";
  oNotif->MaxVisible = 5;
  oNotif->ShowBadge = true;

  oNotif->AddNotification("New order",
    "Order #1042 was placed.", hcSuccess, "2 min ago");
  oNotif->AddNotification("Payment failed",
    "Invoice #88 could not be charged.", hcDanger, "10 min ago");

  String html = oNotif->HTML;   // bell dropdown + badge
}
__finally
{
  delete oNotif;
}

// Or add items via the Items collection directly:
TsgcHTMLNotificationItem *item = oNotif->Items->Add();
item->Title = "Welcome";
item->Message = "Your account is ready.";
item->Color = hcInfo;
using esegece.sgcWebSockets;

var notif = new TsgcHTMLComponent_Notification();
notif.Title = "Notifications";
notif.MaxVisible = 5;
notif.ShowBadge = true;

notif.AddNotification("New order",
    "Order #1042 was placed.", TsgcHTMLColor.hcSuccess, "2 min ago");
notif.AddNotification("Payment failed",
    "Invoice #88 could not be charged.", TsgcHTMLColor.hcDanger, "10 min ago");

string html = notif.HTML;   // bell dropdown + badge

// Or add items via the Items collection directly:
var item = notif.Items.Add();
item.Title = "Welcome";
item.Message = "Your account is ready.";
item.Color = TsgcHTMLColor.hcInfo;

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Items

Items é uma coleção TsgcHTMLNotificationItems; cada TsgcHTMLNotificationItem tem Title, Message, Timestamp, Color, Icon, Href e Read.

Adicionar notificações

AddNotification(title, message, color, timestamp) adiciona um item e usa o horário atual como padrão para o carimbo de tempo quando omitido.

Badge de não lidas

UnreadCount conta os itens cujo Read é False; ShowBadge alterna a pílula vermelha e GetBadgeHTML retorna apenas o markup do badge.

Cabeçalho

Title define o título do dropdown, EmptyText o placeholder quando não há itens e BellIcon o glifo do gatilho.

Limites

MaxVisible limita quantos itens são renderizados (padrão 5), com um link "Ver tudo" quando há mais; NotificationID atribui o id do elemento.

Saída

HTML retorna o dropdown completo com ícone de sino e seu CSS com escopo — sirva-o ou atribua-o ao BodyContent de um template de página.

Continue explorando

Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.
Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.
PreçosLicenças Single, Team e Site com código-fonte completo.

Pronto para Começar?

Baixe a versão de avaliação gratuita e comece a construir UIs web em Delphi, C++ Builder e .NET.