ListGroup

TsgcHTMLComponent_ListGroup — Delphi、C++ Builder、.NET で、バッジとコンテンツを備えたリンクや項目のリストグループを、独自の項目から、またはデータセットから直接レンダリングします。

TsgcHTMLComponent_ListGroup

Bootstrap 5 の list-group を出力するリストコンポーネントです。項目を追加し(任意のバッジとコンテンツを伴う)、flush / numbered / horizontal のフラグを設定してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_ListGroup

レンダリング内容

Bootstrap 5 の list-group マークアップ

言語

Delphi, C++ Builder, .NET

作成し、項目を追加し、レンダリングする

各行について AddItem(text, href, badge, badgeStyle) を呼び出し(または Items に直接プッシュし)、レイアウトフラグを設定してから、HTML を読み取ります(または TsgcHTMLTemplate_Bootstrap ページに組み込みます)。

uses
  sgcHTML_Enums, sgcHTML_Component_ListGroup;

var
  oList: TsgcHTMLComponent_ListGroup;
begin
  oList := TsgcHTMLComponent_ListGroup.Create(nil);
  try
    oList.Flush := True;

    oList.AddItem('Inbox', '/inbox', '14', bgPrimary);
    oList.AddItem('Drafts', '/drafts', '2', bgSecondary);
    oList.AddItem('Spam', '/spam', '99+', bgDanger);

    WebModule.Response := oList.HTML;   // Bootstrap list-group
  finally
    oList.Free;
  end;
end;

// Or fill the list straight from a dataset:
oList.LoadFromDataSet(qryFolders, 'Name', 'Url', 'Unread');
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_ListGroup.hpp

TsgcHTMLComponent_ListGroup *oList = new TsgcHTMLComponent_ListGroup(NULL);
try
{
  oList->Flush = true;

  oList->AddItem("Inbox", "/inbox", "14", bgPrimary);
  oList->AddItem("Drafts", "/drafts", "2", bgSecondary);
  oList->AddItem("Spam", "/spam", "99+", bgDanger);

  String html = oList->HTML;   // Bootstrap list-group
}
__finally
{
  delete oList;
}
using esegece.sgcWebSockets;

var list = new TsgcHTMLComponent_ListGroup();
list.Flush = true;

list.AddItem("Inbox", "/inbox", "14", TsgcHTMLBadgeStyle.bgPrimary);
list.AddItem("Drafts", "/drafts", "2", TsgcHTMLBadgeStyle.bgSecondary);
list.AddItem("Spam", "/spam", "99+", TsgcHTMLBadgeStyle.bgDanger);

string html = list.HTML;   // Bootstrap list-group

// Or fill the list straight from a dataset:
list.LoadFromDataSet(qryFolders, "Name", "Url", "Unread");

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

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

Items

ItemsTsgcHTMLListGroupItems コレクションです。各 TsgcHTMLListGroupItemTextHrefBadgeBadgeStyleActiveDisabledContent を持ちます。

AddItem

AddItem(aText, aHref, aBadge, aBadgeStyle) は 1 回の呼び出しで行を追加します。空でない Href は、項目をクリック可能な list-group-item-action リンクとしてレンダリングします。

Dataset binding

LoadFromDataSet(aDataSet, aTextField, aHrefField, aBadgeField) は、クエリから各行ごとに 1 項目ずつリストを埋めます。

Badges & content

項目の BadgeBadgeStylebgPrimary などの TsgcHTMLBadgeStyle)を設定するとピル形式のカウンターになり、Content は補足説明の行を追加します。

Layout

Flush は外側の枠線を取り除き、Numbered は順序付きの list-group-numbered をレンダリングし、Horizontal は項目を横一列に配置します。

Output

HTMLlist-group マークアップを返し、ListGroupID はその要素 id を設定します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

さらに詳しく

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

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

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