Accordion コンポーネント — sgcHTML

ひと目でわかる

TsgcHTMLComponent_Accordion

Bootstrap の accordion 上に構築された、折りたたみ可能なパネルのスタックです。タイトルとコンテンツを持つ項目を追加し、どれを最初に開くかを指定したら、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Accordion

レンダリング結果

Bootstrap 5 の accordion マークアップ

ファミリー

コンテンツ & レイアウト

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、パネルを追加し、レンダリングする

各パネルを Items.Add で追加し、その Title、Content、Expanded フラグを設定したら、HTML を読み取ります。

uses
  sgcHTML_Component_Accordion;

var
  oAcc: TsgcHTMLComponent_Accordion;
begin
  oAcc := TsgcHTMLComponent_Accordion.Create(nil);
  try
    oAcc.AccordionID := 'faq';
    oAcc.Flush := False;
    oAcc.AlwaysOpen := False;

    with oAcc.Items.Add do
    begin
      Title := 'What is sgcHTML?';
      Content := 'A server-side HTML component library.';
      Expanded := True;
    end;
    with oAcc.Items.Add do
    begin
      Title := 'Which languages?';
      Content := 'Delphi, C++ Builder and .NET.';
    end;

    WebModule.Response := oAcc.HTML;   // Bootstrap accordion
  finally
    oAcc.Free;
  end;
end;

// includes: sgcHTML_Component_Accordion.hpp

TsgcHTMLComponent_Accordion *oAcc = new TsgcHTMLComponent_Accordion(NULL);
try
{
  oAcc->AccordionID = "faq";
  oAcc->Flush = false;
  oAcc->AlwaysOpen = false;

  TsgcHTMLAccordionItem *oItem = oAcc->Items->Add();
  oItem->Title = "What is sgcHTML?";
  oItem->Content = "A server-side HTML component library.";
  oItem->Expanded = true;

  oItem = oAcc->Items->Add();
  oItem->Title = "Which languages?";
  oItem->Content = "Delphi, C++ Builder and .NET.";

  String html = oAcc->HTML;   // Bootstrap accordion
}
__finally
{
  delete oAcc;
}

using esegece.sgcWebSockets;

var acc = new TsgcHTMLComponent_Accordion();
acc.AccordionID = "faq";
acc.Flush = false;
acc.AlwaysOpen = false;

var item = acc.Items.Add();
item.Title = "What is sgcHTML?";
item.Content = "A server-side HTML component library.";
item.Expanded = true;

item = acc.Items.Add();
item.Title = "Which languages?";
item.Content = "Delphi, C++ Builder and .NET.";

string html = acc.HTML;   // Bootstrap accordion

リファレンス

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

最もよく使うメンバー。

Items

Items（TsgcHTMLAccordionItems）がパネルを保持します。Items.Add を呼び出してパネルを 1 つ追加し、設定します。

項目のコンテンツ

各項目は、ヘッダーボタン用の Title、パネル本体用の Content、最初から開いておくための Expanded を公開します。

単一 vs 複数

AlwaysOpen を使うと複数のパネルを同時に開いたままにできます。オフの場合、1 つのパネルを開くと他のパネルは折りたたまれます。

スタイル

Flush は外側のボーダーと角丸を取り除き、端から端まで広がるアコーディオンにします。

識別子

AccordionID は、パネルの折りたたみ親を関連付けるために使うコンテナの id を設定します。

出力

HTML は完全な accordion マークアップを返します — そのまま配信するか、ページテンプレートのボディコンテンツに割り当てます。

リソース

さらに詳しく

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

Accordion