In één oogopslag

Een dropdown-component dat een Bootstrap 5-toggle-knop plus zijn <ul class="dropdown-menu"> uitstuurt. Voeg menu-items toe, stel de knopstijl in en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Dropdown

Rendert

Bootstrap 5 dropdown-knop + menu

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg items toe, render hem

Stel ButtonText en ButtonStyleEnum in, voeg link- / kop- / scheidingslijn-items toe en lees dan HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).

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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Items is de TsgcHTMLDropdownItems-verzameling; Items.Add retourneert een TsgcHTMLDropdownItem met Text, Href, Disabled en de Header- / Divider-vlaggen.

Itemsoorten

Zet Header voor een sectielabel, Divider voor een scheidingslijn, of laat beide uit voor een gewone linkvermelding; Disabled maakt een vermelding grijs.

Knop

ButtonText is het toggle-bijschrift; ButtonStyleEnum (een TsgcHTMLButtonStyle zoals bsPrimary) selecteert de variant, en ButtonClass overschrijft die met ruwe classes.

Split

Split rendert de toggle als een aparte caret-knop naast de hoofdactieknop.

Uitvoer

HTML retourneert de dropdown-wrapper, toggle-knop en menu en DropdownID stelt de element-id in — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Dropdown

TsgcHTMLComponent_Dropdown