Komponent Dropdown — sgcHTML

W skrócie

Komponent listy rozwijanej, który generuje przycisk przełączający Bootstrap 5 wraz z jego <ul class="dropdown-menu">. Dodaj pozycje menu, ustaw styl przycisku, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_Dropdown

Renderuje

Przycisk dropdown Bootstrap 5 + menu

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz go, dodaj pozycje, wyrenderuj

Ustaw ButtonText i ButtonStyleEnum, dodaj pozycje link / nagłówek / separator, a następnie odczytaj HTML (albo umieść go na stronie 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Pozycje

Items to kolekcja TsgcHTMLDropdownItems; Items.Add zwraca TsgcHTMLDropdownItem z Text, Href, Disabled oraz flagami Header / Divider.

Rodzaje pozycji

Ustaw Header dla etykiety sekcji, Divider dla linii separatora lub pozostaw oba wyłączone dla zwykłej pozycji linku; Disabled wyszarza pozycję.

Przycisk

ButtonText to podpis przełącznika; ButtonStyleEnum (TsgcHTMLButtonStyle, na przykład bsPrimary) wybiera wariant, a ButtonClass nadpisuje go surowymi klasami.

Podział

Split renderuje przełącznik jako osobny przycisk ze strzałką obok głównego przycisku akcji.

Wynik

HTML zwraca kontener listy rozwijanej, przycisk przełączający i menu, a DropdownID ustawia jego identyfikator elementu — udostępnij go lub przypisz do właściwości BodyContent szablonu strony.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

Dropdown

TsgcHTMLComponent_Dropdown