En bref

Un composant déroulant qui émet un bouton bascule Bootstrap 5 ainsi que son <ul class="dropdown-menu">. Ajoutez des éléments de menu, définissez le style du bouton, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Dropdown

Produit

Bouton dropdown Bootstrap 5 + menu

Famille

Navigation & Structure

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, ajoutez des éléments, affichez-le

Définissez ButtonText et ButtonStyleEnum, ajoutez des éléments de type lien / en-tête / séparateur, puis lisez HTML (ou intégrez-le dans une page 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Items

Items est la collection TsgcHTMLDropdownItems ; Items.Add renvoie un TsgcHTMLDropdownItem avec Text, Href, Disabled et les indicateurs Header / Divider.

Types d'éléments

Activez Header pour un libellé de section, Divider pour une ligne de séparation, ou laissez les deux désactivés pour une entrée de lien simple ; Disabled grise une entrée.

Bouton

ButtonText est la légende de la bascule ; ButtonStyleEnum (un TsgcHTMLButtonStyle tel que bsPrimary) sélectionne la variante, et ButtonClass le remplace par des classes brutes.

Scindé

Split rend la bascule comme un bouton chevron séparé à côté du bouton d'action principal.

Sortie

HTML renvoie le conteneur déroulant, le bouton bascule et le menu, et DropdownID définit l'identifiant de son élément — servez-le, ou affectez-le au BodyContent d'un modèle de page.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

Dropdown

TsgcHTMLComponent_Dropdown