Componente Dropdown — sgcHTML

De un vistazo

Un componente desplegable que emite un botón toggle de Bootstrap 5 más su <ul class="dropdown-menu">. Añade items de menú, establece el estilo del botón, luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Dropdown

Genera

Botón dropdown + menú de Bootstrap 5

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade items, renderízalo

Establece ButtonText y ButtonStyleEnum, añade items de enlace / encabezado / divisor, luego lee HTML (o colócalo en una página 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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Items

Items es la colección TsgcHTMLDropdownItems; Items.Add devuelve un TsgcHTMLDropdownItem con Text, Href, Disabled y los flags Header / Divider.

Tipos de item

Activa Header para una etiqueta de sección, Divider para una línea separadora, o deja ambos desactivados para una entrada de enlace simple; Disabled atenúa una entrada.

Botón

ButtonText es el texto del toggle; ButtonStyleEnum (un TsgcHTMLButtonStyle como bsPrimary) selecciona la variante, y ButtonClass la sobrescribe con clases directas.

Split

Split genera el toggle como un botón de cursor separado junto al botón de acción principal.

Salida

HTML devuelve el contenedor del desplegable, el botón toggle y el menú, y DropdownID establece el id de su elemento — sírvelo, o asígnalo al BodyContent de una plantilla de página.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

Dropdown

TsgcHTMLComponent_Dropdown