ListGroup
TsgcHTMLComponent_ListGroup — Delphi、C++ Builder、.NET で、バッジとコンテンツを備えたリンクや項目のリストグループを、独自の項目から、またはデータセットから直接レンダリングします。
TsgcHTMLComponent_ListGroup — Delphi、C++ Builder、.NET で、バッジとコンテンツを備えたリンクや項目のリストグループを、独自の項目から、またはデータセットから直接レンダリングします。
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 は TsgcHTMLListGroupItems コレクションです。各 TsgcHTMLListGroupItem は Text、Href、Badge、BadgeStyle、Active、Disabled、Content を持ちます。
AddItem(aText, aHref, aBadge, aBadgeStyle) は 1 回の呼び出しで行を追加します。空でない Href は、項目をクリック可能な list-group-item-action リンクとしてレンダリングします。
LoadFromDataSet(aDataSet, aTextField, aHrefField, aBadgeField) は、クエリから各行ごとに 1 項目ずつリストを埋めます。
項目の Badge に BadgeStyle(bgPrimary などの TsgcHTMLBadgeStyle)を設定するとピル形式のカウンターになり、Content は補足説明の行を追加します。
Flush は外側の枠線を取り除き、Numbered は順序付きの list-group-numbered をレンダリングし、Horizontal は項目を横一列に配置します。
HTML は list-group マークアップを返し、ListGroupID はその要素 id を設定します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。