한눈에 보기

TsgcHTMLComponent_ButtonGroup

Bootstrap 5 btn-group을 내보내는 버튼 그룹 컴포넌트입니다. 버튼 항목을 추가하고, 각 항목의 스타일과 상태를 설정한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_ButtonGroup

렌더링

Bootstrap 5 btn-group 마크업

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 버튼을 추가하고, 렌더링하기

버튼 항목을 추가하고, 각 Text, ButtonStyle 및 Active 플래그를 설정하고, Size를 선택한 다음, HTML을 읽습니다(또는 TsgcHTMLTemplate_Bootstrap 페이지에 넣습니다).

uses
  sgcHTML_Enums, sgcHTML_Component_ButtonGroup;

var
  oGroup: TsgcHTMLComponent_ButtonGroup;
  oBtn: TsgcHTMLButtonItem;
begin
  oGroup := TsgcHTMLComponent_ButtonGroup.Create(nil);
  try
    oGroup.Size := bgsLarge;
    oGroup.AriaLabel := 'View mode';

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Day';
    oBtn.ButtonStyle := bsOutlinePrimary;
    oBtn.Active := True;

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Week';
    oBtn.ButtonStyle := bsOutlinePrimary;

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Month';
    oBtn.ButtonStyle := bsOutlinePrimary;
    oBtn.Disabled := True;

    WebModule.Response := oGroup.HTML;   // Bootstrap btn-group
  finally
    oGroup.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_ButtonGroup.hpp

TsgcHTMLComponent_ButtonGroup *oGroup = new TsgcHTMLComponent_ButtonGroup(NULL);
try
{
  oGroup->Size = bgsLarge;
  oGroup->AriaLabel = "View mode";

  TsgcHTMLButtonItem *oBtn = oGroup->Items->Add();
  oBtn->Text = "Day";
  oBtn->ButtonStyle = bsOutlinePrimary;
  oBtn->Active = true;

  oBtn = oGroup->Items->Add();
  oBtn->Text = "Week";
  oBtn->ButtonStyle = bsOutlinePrimary;

  oBtn = oGroup->Items->Add();
  oBtn->Text = "Month";
  oBtn->ButtonStyle = bsOutlinePrimary;
  oBtn->Disabled = true;

  String html = oGroup->HTML;   // Bootstrap btn-group
}
__finally
{
  delete oGroup;
}

using esegece.sgcWebSockets;

var group = new TsgcHTMLComponent_ButtonGroup();
group.Size = TsgcHTMLButtonGroupSize.bgsLarge;
group.AriaLabel = "View mode";

var btn = group.Items.Add();
btn.Text = "Day";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;
btn.Active = true;

btn = group.Items.Add();
btn.Text = "Week";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;

btn = group.Items.Add();
btn.Text = "Month";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;
btn.Disabled = true;

string html = group.HTML;   // Bootstrap btn-group

레퍼런스

주요 속성 및 메서드

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

Items

Items는 TsgcHTMLButtonItems 컬렉션입니다. Items.Add는 Text, Href, Active, Disabled 및 ButtonStyle을 갖춘 TsgcHTMLButtonItem을 반환합니다.

항목 스타일

각 항목의 ButtonStyle(bsOutlinePrimary 같은 TsgcHTMLButtonStyle)은 변형을 설정하고, BtnClass는 원시 클래스로 이를 재정의합니다. Href는 항목을 버튼 대신 앵커로 렌더링합니다.

크기 및 레이아웃

Size는 bgsDefault, bgsSmall 또는 bgsLarge를 선택합니다. Vertical은 버튼을 btn-group-vertical로 쌓습니다.

접근성

AriaLabel은 스크린 리더를 위해 그룹의 aria-label을 설정합니다. GroupID는 그 요소 id를 할당합니다.

출력

HTML은 btn-group 래퍼와 그 버튼 / 링크 자식을 반환합니다 — 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

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

ButtonGroup