Notification
TsgcHTMLComponent_Notification — Delphi、C++ Builder、.NET で、通知項目のコレクションから構築される、未読バッジ付きのベルアイコンドロップダウン通知センターをレンダリングします。
TsgcHTMLComponent_Notification — Delphi、C++ Builder、.NET で、通知項目のコレクションから構築される、未読バッジ付きのベルアイコンドロップダウン通知センターをレンダリングします。
Bootstrap 5 のドロップダウンを出力する通知センターコンポーネントです。Items コレクションに項目を追加し(または AddNotification を呼び出し)、HTML プロパティを読み取ります — 未読の UnreadCount がバッジを駆動します。
TsgcHTMLComponent_Notification
Bootstrap 5 のドロップダウンマークアップ
Delphi, C++ Builder, .NET
Title と MaxVisible を設定し、各エントリについて AddNotification(title, message, color, timestamp) を呼び出してから、HTML を読み取ります。未読数は自動的にバッジに反映されます。
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;
最もよく使うメンバーです。
Items は TsgcHTMLNotificationItems コレクションです。各 TsgcHTMLNotificationItem は Title、Message、Timestamp、Color、Icon、Href、Read を持ちます。
AddNotification(title, message, color, timestamp) は項目を追加し、タイムスタンプを省略すると現在時刻を既定値にします。
UnreadCount は Read が False の項目を数えます。ShowBadge は赤いピルを切り替え、GetBadgeHTML はバッジのマークアップのみを返します。
Title はドロップダウンの見出しを設定し、EmptyText は項目がないときのプレースホルダーを、BellIcon はトリガーのグリフを設定します。
MaxVisible はレンダリングする項目数の上限(既定値 5)を設定し、より多くある場合は「View all」リンクを表示します。NotificationID は要素 id を割り当てます。
HTML は、スコープ付き CSS を含む完全なベルアイコンドロップダウンを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。