Accordion

TsgcHTMLComponent_Accordion — 在 Delphi、C++ Builder 和 .NET 中渲染由可堆叠、可展开面板组成的垂直折叠手风琴。

TsgcHTMLComponent_Accordion

基于 Bootstrap accordion 构建的一组可折叠面板。添加带有标题和内容的项目,标记哪些默认展开,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Accordion

渲染为

Bootstrap 5 accordion 标记

语言

Delphi, C++ Builder, .NET

创建它、添加面板、渲染它

通过 Items.Add 添加每个面板,设置其 TitleContentExpanded 标志,然后读取 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

ItemsTsgcHTMLAccordionItems)保存这些面板;调用 Items.Add 可追加一个面板并对其进行配置。

项目内容

每个项目都公开 Title 作为标题按钮,Content 作为面板主体,Expanded 让它默认展开。

单个与多个

AlwaysOpen 允许多个面板同时保持展开;关闭该选项时,打开一个面板会折叠其他面板。

样式

Flush 移除外边框和圆角,形成边到边的手风琴。

标识

AccordionID 设置容器 id,用于为这些面板接入折叠父容器。

输出

HTML 返回完整的 accordion 标记 — 直接提供服务,或将其赋给页面模板的主体内容。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。