Notification

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

TsgcHTMLComponent_Notification

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

Items は TsgcHTMLNotificationItems コレクションです。各 TsgcHTMLNotificationItem は Title、Message、Timestamp、Color、Icon、Href、Read を持ちます。

Add notifications

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

Unread badge

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

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

Limits

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

Output

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

インボックスとプッシュ

アプリケーションが保存する 1 人のユーザーの通知については、NotificationInbox と NotificationPreferences を参照してください。ページを開いていないブラウザーに届けるには、WebPush を参照してください。

さらに詳しく

オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。
すべての sgcHTML コンポーネント80 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。
最もお得な選択: All-AccesseSeGeCe の全製品にプレミアムサポートが付いて、年間 €1,059 からご利用いただけます。
All-Access の価格を見る

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

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