Notification

TsgcHTMLComponent_Notification — Delphi、C++ Builder、.NET で、通知項目のコレクションから構築される、未読バッジ付きのベルアイコンドロップダウン通知センターをレンダリングします。

TsgcHTMLComponent_Notification

Bootstrap 5 のドロップダウンを出力する通知センターコンポーネントです。Items コレクションに項目を追加し(または AddNotification を呼び出し)、HTML プロパティを読み取ります — 未読の UnreadCount がバッジを駆動します。

コンポーネントクラス

TsgcHTMLComponent_Notification

レンダリング内容

Bootstrap 5 のドロップダウンマークアップ

言語

Delphi, C++ Builder, .NET

作成し、通知を追加し、レンダリングする

TitleMaxVisible を設定し、各エントリについて 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

ItemsTsgcHTMLNotificationItems コレクションです。各 TsgcHTMLNotificationItemTitleMessageTimestampColorIconHrefRead を持ちます。

Add notifications

AddNotification(title, message, color, timestamp) は項目を追加し、タイムスタンプを省略すると現在時刻を既定値にします。

Unread badge

UnreadCountReadFalse の項目を数えます。ShowBadge は赤いピルを切り替え、GetBadgeHTML はバッジのマークアップのみを返します。

Title はドロップダウンの見出しを設定し、EmptyText は項目がないときのプレースホルダーを、BellIcon はトリガーのグリフを設定します。

Limits

MaxVisible はレンダリングする項目数の上限(既定値 5)を設定し、より多くある場合は「View all」リンクを表示します。NotificationID は要素 id を割り当てます。

Output

HTML は、スコープ付き CSS を含む完全なベルアイコンドロップダウンを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。