Offcanvas

TsgcHTMLComponent_Offcanvas — Delphi, C++ Builder 및 .NET에서 선택적 다크 테마와 정적 배경과 함께 시작, 끝, 위 또는 아래 가장자리에서 슬라이드되는 Bootstrap 5 오프캔버스 패널을 렌더링합니다.

한눈에 보기

TsgcHTMLComponent_Offcanvas

Bootstrap 5 offcanvas 마크업을 내보내는 슬라이드인 패널 컴포넌트입니다. 배치 가장자리를 선택하고, 제목과 본문을 설정한 다음, HTML 속성을 읽습니다 — 또는 한 줄짜리 정적 Build 헬퍼를 호출하십시오.

컴포넌트 클래스

TsgcHTMLComponent_Offcanvas

렌더링

Bootstrap 5 offcanvas 마크업

패밀리

오버레이 및 피드백

언어

Delphi, C++ Builder, .NET

QuickStart

한 줄로 구성하거나, 완전하게 구성하기

빠른 패널을 위해 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에 할당하십시오.

리소스

계속 살펴보기

	모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기