Offcanvas
TsgcHTMLComponent_Offcanvas — Delphi、C++ Builder、.NET で、左端、右端、上端、または下端からスライドインする Bootstrap 5 オフキャンバスパネルを、任意のダークテーマと静的バックドロップ付きでレンダリングします。
TsgcHTMLComponent_Offcanvas — Delphi、C++ Builder、.NET で、左端、右端、上端、または下端からスライドインする Bootstrap 5 オフキャンバスパネルを、任意のダークテーマと静的バックドロップ付きでレンダリングします。
Bootstrap 5 の offcanvas マークアップを出力するスライドインパネルコンポーネントです。配置する端を選択し、タイトルと本文を設定してから、HTML プロパティを読み取ります — または、静的な Build ヘルパーを呼び出して一行で記述します。
TsgcHTMLComponent_Offcanvas
Bootstrap 5 の offcanvas マークアップ
Delphi, C++ Builder, .NET
手軽なパネルには Build(id, title, body, placement, dark) を呼び出すか、コンポーネントを作成して Placement と Dark を設定してから、HTML を読み取ります。パネルを開くには BuildTriggerButton と組み合わせます。
uses
sgcHTML_Enums, sgcHTML_Component_Offcanvas;
// One-line static helper (primary form):
var
vTrigger, vPanel: string;
begin
vTrigger := TsgcHTMLComponent_Offcanvas.BuildTriggerButton('menuPanel',
'Open menu', bsPrimary);
vPanel := TsgcHTMLComponent_Offcanvas.Build('menuPanel',
'Navigation', '<p>Side panel content.</p>', opEnd, True);
WebModule.Response := vTrigger + vPanel;
end;
// Or configure it fully:
var
oOC: TsgcHTMLComponent_Offcanvas;
begin
oOC := TsgcHTMLComponent_Offcanvas.Create(nil);
try
oOC.OffcanvasID := 'menuPanel';
oOC.Title := 'Navigation';
oOC.Body := '<p>Side panel content.</p>';
oOC.Placement := opEnd;
oOC.Dark := True;
oOC.StaticBackdrop := True;
WebModule.Response := oOC.HTML; // Bootstrap offcanvas markup
finally
oOC.Free;
end;
end;// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Offcanvas.hpp
// One-line static helper (primary form):
String trigger = TsgcHTMLComponent_Offcanvas::BuildTriggerButton("menuPanel",
"Open menu", bsPrimary);
String panel = TsgcHTMLComponent_Offcanvas::Build("menuPanel",
"Navigation", "<p>Side panel content.</p>", opEnd, true);
// Or configure it fully:
TsgcHTMLComponent_Offcanvas *oOC = new TsgcHTMLComponent_Offcanvas(NULL);
try
{
oOC->OffcanvasID = "menuPanel";
oOC->Title = "Navigation";
oOC->Body = "<p>Side panel content.</p>";
oOC->Placement = opEnd;
oOC->Dark = true;
oOC->StaticBackdrop = true;
String html = oOC->HTML; // Bootstrap offcanvas markup
}
__finally
{
delete oOC;
}using esegece.sgcWebSockets;
// One-line static helper (primary form):
string trigger = TsgcHTMLComponent_Offcanvas.BuildTriggerButton("menuPanel",
"Open menu", TsgcHTMLButtonStyle.bsPrimary);
string panel = TsgcHTMLComponent_Offcanvas.Build("menuPanel",
"Navigation", "<p>Side panel content.</p>",
TsgcHTMLOffcanvasPlacement.opEnd, true);
// Or configure it fully:
var oc = new TsgcHTMLComponent_Offcanvas();
oc.OffcanvasID = "menuPanel";
oc.Title = "Navigation";
oc.Body = "<p>Side panel content.</p>";
oc.Placement = TsgcHTMLOffcanvasPlacement.opEnd;
oc.Dark = true;
oc.StaticBackdrop = true;
string html = oc.HTML; // Bootstrap offcanvas markup最もよく使うメンバーです。
Title はヘッダーの見出しを設定し、Body はパネルの内容を保持します。OffcanvasID は、トリガーが参照する要素 id です。
Placement は、TsgcHTMLOffcanvasPlacement を介して opStart、opEnd、opTop、または opBottom からパネルをスライドさせます。
Dark はダークカラースキーム（と白い閉じるボタン）を適用します。CSSClass はパネルに追加のクラスを付加します。
StaticBackdrop は外側クリック時にパネルを開いたままにします。ShowClose はヘッダーの閉じるボタンを切り替えます。
Build(id, title, body, placement, dark) はすぐに使えるパネルを返します。BuildTriggerButton(offcanvasID, text, style) は、それを開くボタンを出力します。
HTML は完全な Bootstrap オフキャンバスのマークアップを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。