Auf einen Blick

Eine Dropdown-Komponente, die eine Bootstrap-5-Umschalt-Schaltfläche samt zugehörigem <ul class="dropdown-menu"> ausgibt. Fügen Sie Menüelemente hinzu, setzen Sie den Schaltflächenstil und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Dropdown

Rendert

Bootstrap-5-dropdown-Schaltfläche + Menü

Familie

Navigation & Struktur

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Elemente hinzufügen, rendern

Setzen Sie ButtonText und ButtonStyleEnum, fügen Sie Link-/Überschrift-/Trennlinien-Elemente hinzu und lesen Sie dann HTML (oder fügen Sie es in eine TsgcHTMLTemplate_Bootstrap-Seite ein).

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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Items

Items ist die TsgcHTMLDropdownItems-Sammlung; Items.Add gibt ein TsgcHTMLDropdownItem mit Text, Href, Disabled und den Flags Header / Divider zurück.

Elementarten

Setzen Sie Header für eine Abschnittsbeschriftung, Divider für eine Trennlinie oder lassen Sie beide aus für einen einfachen Link-Eintrag; Disabled graut einen Eintrag aus.

Schaltfläche

ButtonText ist die Beschriftung des Umschalters; ButtonStyleEnum (ein TsgcHTMLButtonStyle wie bsPrimary) wählt die Variante, und ButtonClass überschreibt sie mit rohen Klassen.

Split

Split rendert den Umschalter als separate Caret-Schaltfläche neben der Haupt-Aktionsschaltfläche.

Ausgabe

HTML gibt den Dropdown-Wrapper, die Umschalt-Schaltfläche und das Menü zurück, und DropdownID setzt dessen Element-id — liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

Dropdown

TsgcHTMLComponent_Dropdown