EmptyState コンポーネント — sgcHTML | eSeGeCe

EmptyState

TsgcHTMLComponent_EmptyState — Delphi、C++ Builder、.NET で、グリッド、リスト、検索結果に行が 1 件もないときに表示するパネルをレンダリングします。アイコンまたは画像、タイトル、説明文、最大 2 個のボタンで構成されます。

TsgcHTMLComponent_EmptyState

IconTitleDescription を設定してから HTML プロパティを読み取ります。スクリプトを一切出力しないため、ページが必要とする回数だけアウトオブバンドのフラグメントとして安全にプッシュできます。

コンポーネントクラス

TsgcHTMLComponent_EmptyState

レンダリング内容

単一のプレースホルダー <div>、スクリプトなし

言語

Delphi, C++ Builder, .NET

「何もありません」を正しく伝える

Icon は CSS アイコンクラスまたはインライン SVG マークアップを受け付け、簡易的な安全性チェックの後にそのまま出力されます。エンドユーザーの入力を Icon に直接バインドしないでください。信頼できないテキストは、常に HTML エンコードされる TitleDescription にバインドしてください。

uses
  sgcHTML_Enums, sgcHTML_Component_EmptyState;

var
  oEmpty: TsgcHTMLComponent_EmptyState;
begin
  oEmpty := TsgcHTMLComponent_EmptyState.Create(nil);
  try
    oEmpty.Icon := 'bi bi-inbox';
    oEmpty.Title := 'No results';
    oEmpty.Description := 'Try a different search, or clear your filters.';
    oEmpty.ActionCaption := 'Clear filters';
    oEmpty.ActionHref := '/orders';
    oEmpty.ActionStyle := bsPrimary;

    WebModule.Response := oEmpty.HTML;
  finally
    oEmpty.Free;
  end;
end;

// Or the one-line static helper for the simple case:
WebModule.Response := TsgcHTMLComponent_EmptyState.Build('No results', 'Try a different search.');
// includes: sgcHTML_Component_EmptyState.hpp

TsgcHTMLComponent_EmptyState *oEmpty = new TsgcHTMLComponent_EmptyState(NULL);
try
{
  oEmpty->Icon = "bi bi-inbox";
  oEmpty->Title = "No results";
  oEmpty->Description = "Try a different search, or clear your filters.";
  oEmpty->ActionCaption = "Clear filters";
  oEmpty->ActionHref = "/orders";
  oEmpty->ActionStyle = bsPrimary;

  String html = oEmpty->HTML;
}
__finally
{
  delete oEmpty;
}

// Or the one-line static helper for the simple case:
String html2 = TsgcHTMLComponent_EmptyState::Build("No results", "Try a different search.");
using esegece.sgcWebSockets;

var empty = new TsgcHTMLComponent_EmptyState();
empty.Icon = "bi bi-inbox";
empty.Title = "No results";
empty.Description = "Try a different search, or clear your filters.";
empty.ActionCaption = "Clear filters";
empty.ActionHref = "/orders";
empty.ActionStyle = ButtonStyle.bsPrimary;

string html = empty.HTML;

// Or the one-line static helper for the simple case:
string html2 = TsgcHTMLComponent_EmptyState.Build("No results", "Try a different search.");

主なプロパティとメソッド

最もよく使うメンバーです。

Icon / ImageURL

CSS アイコンクラスまたはインライン SVG です(サニタイズされ、拒否された場合は破棄されます)。両方を設定した場合は ImageURLIcon より優先されます。

Title / Description

常に HTML エンコードされるため、データベースやユーザー入力のテキストを安全にバインドできる組です。

ActionCaption / ActionHref / ActionStyle

共通の TsgcHTMLButtonStyle 列挙型でスタイル指定するプライマリ CTA ボタンで、既定値は bsPrimary です。

SecondaryActionCaption / SecondaryActionHref

2 個目のボタンで、常にアウトラインスタイルになり、専用のスタイルプロパティはありません。

Compact

ページ/セクション全体ではなく、ウィジェットやテーブル本体のような小さな埋め込み領域向けに、パディングを詰めます。

Build

クラス関数です。一時インスタンスを生成して Title/Description を設定し、レンダリングして解放するところまでを 1 回の呼び出しで行います。

さらに詳しく

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

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

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