In sintesi

Un componente dropdown che emette un pulsante toggle Bootstrap 5 più il suo <ul class="dropdown-menu">. Aggiungi le voci di menu, imposta lo stile del pulsante, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_Dropdown

Renderizza

Bootstrap 5 dropdown button + menu

Famiglia

Navigazione e Struttura

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Crealo, aggiungi gli elementi, renderizzalo

Imposta ButtonText e ButtonStyleEnum, aggiungi elementi link / intestazione / divisore, quindi leggi HTML (oppure inseriscilo in una pagina 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Items

Items è la collezione TsgcHTMLDropdownItems; Items.Add restituisce un TsgcHTMLDropdownItem con Text, Href, Disabled e i flag Header / Divider.

Tipi di elemento

Imposta Header per un’etichetta di sezione, Divider per una riga di separazione, oppure lascia entrambi disattivati per una semplice voce link; Disabled disattiva una voce.

Pulsante

ButtonText è la didascalia del toggle; ButtonStyleEnum (un TsgcHTMLButtonStyle come bsPrimary) seleziona la variante, e ButtonClass la sovrascrive con classi grezze.

Split

Split renderizza il toggle come un pulsante a freccia separato accanto al pulsante di azione principale.

Output

HTML restituisce il wrapper del dropdown, il pulsante toggle e il menu, e DropdownID ne imposta l’id dell’elemento — servilo, oppure assegnalo al BodyContent di un template di pagina.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

Dropdown

TsgcHTMLComponent_Dropdown