Accordion
TsgcHTMLComponent_Accordion — 在 Delphi、C++ Builder 和 .NET 中渲染由可堆叠、可展开面板组成的垂直折叠手风琴。
TsgcHTMLComponent_Accordion — 在 Delphi、C++ Builder 和 .NET 中渲染由可堆叠、可展开面板组成的垂直折叠手风琴。
基于 Bootstrap accordion 构建的一组可折叠面板。添加带有标题和内容的项目,标记哪些默认展开,然后读取 HTML 属性。
通过 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(TsgcHTMLAccordionItems)保存这些面板;调用 Items.Add 可追加一个面板并对其进行配置。
每个项目都公开 Title 作为标题按钮,Content 作为面板主体,Expanded 让它默认展开。
AlwaysOpen 允许多个面板同时保持展开;关闭该选项时,打开一个面板会折叠其他面板。
Flush 移除外边框和圆角,形成边到边的手风琴。
AccordionID 设置容器 id,用于为这些面板接入折叠父容器。
HTML 返回完整的 accordion 标记 — 直接提供服务,或将其赋给页面模板的主体内容。