한눈에 보기

Bootstrap 5 토글 버튼과 그 <ul class="dropdown-menu">를 내보내는 드롭다운 컴포넌트입니다. 메뉴 항목을 추가하고, 버튼 스타일을 설정한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_Dropdown

렌더링

Bootstrap 5 dropdown 버튼 + 메뉴

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 항목을 추가하고, 렌더링하기

ButtonText와 ButtonStyleEnum을 설정하고, 링크 / 헤더 / 구분선 항목을 추가한 다음, HTML을 읽습니다(또는 TsgcHTMLTemplate_Bootstrap 페이지에 넣습니다).

uses
  sgcHTML_Enums, sgcHTML_Component_Dropdown;

var
  oDropdown: TsgcHTMLComponent_Dropdown;
  oItem: TsgcHTMLDropdownItem;
begin
  oDropdown := TsgcHTMLComponent_Dropdown.Create(nil);
  try
    oDropdown.ButtonText := 'Account';
    oDropdown.ButtonStyleEnum := bsPrimary;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Settings';
    oItem.Header := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Profile';
    oItem.Href := '/profile';

    oItem := oDropdown.Items.Add;
    oItem.Divider := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Sign out';
    oItem.Href := '/logout';

    WebModule.Response := oDropdown.HTML;   // Bootstrap dropdown
  finally
    oDropdown.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Dropdown.hpp

TsgcHTMLComponent_Dropdown *oDropdown = new TsgcHTMLComponent_Dropdown(NULL);
try
{
  oDropdown->ButtonText = "Account";
  oDropdown->ButtonStyleEnum = bsPrimary;

  TsgcHTMLDropdownItem *oItem = oDropdown->Items->Add();
  oItem->Text = "Settings";
  oItem->Header = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Profile";
  oItem->Href = "/profile";

  oItem = oDropdown->Items->Add();
  oItem->Divider = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Sign out";
  oItem->Href = "/logout";

  String html = oDropdown->HTML;   // Bootstrap dropdown
}
__finally
{
  delete oDropdown;
}

using esegece.sgcWebSockets;

var dropdown = new TsgcHTMLComponent_Dropdown();
dropdown.ButtonText = "Account";
dropdown.ButtonStyleEnum = TsgcHTMLButtonStyle.bsPrimary;

var item = dropdown.Items.Add();
item.Text = "Settings";
item.Header = true;

item = dropdown.Items.Add();
item.Text = "Profile";
item.Href = "/profile";

item = dropdown.Items.Add();
item.Divider = true;

item = dropdown.Items.Add();
item.Text = "Sign out";
item.Href = "/logout";

string html = dropdown.HTML;   // Bootstrap dropdown

레퍼런스

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

Items

Items는 TsgcHTMLDropdownItems 컬렉션입니다. Items.Add는 Text, Href, Disabled 및 Header / Divider 플래그를 갖춘 TsgcHTMLDropdownItem을 반환합니다.

항목 종류

섹션 레이블에는 Header를, 구분선에는 Divider를 설정하거나, 둘 다 끄면 일반 링크 항목이 됩니다. Disabled는 항목을 회색으로 처리합니다.

버튼

ButtonText는 토글 캡션입니다. ButtonStyleEnum(bsPrimary 같은 TsgcHTMLButtonStyle)이 변형을 선택하고, ButtonClass는 원시 클래스로 이를 재정의합니다.

분할

Split은 메인 작업 버튼 옆에 별도의 캐럿 버튼으로 토글을 렌더링합니다.

출력

HTML은 드롭다운 래퍼, 토글 버튼 및 메뉴를 반환하고 DropdownID는 그 요소 id를 설정합니다 — 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

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

Dropdown

TsgcHTMLComponent_Dropdown