Componente Sidebar — sgcHTML

De un vistazo

TsgcHTMLComponent_Sidebar

Un componente de navegación que emite una barra lateral vertical de Bootstrap 5 con una marca opcional, enlaces de tipo nav-pill, encabezados, separadores y un pie. Añade elementos y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Sidebar

Genera

Marcado de sidebar de Bootstrap 5

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

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

Define Brand y Width, añade elementos (enlaces, encabezados, separadores) a Items y luego lee HTML.

uses
  sgcHTML_Component_Sidebar;

var
  oSidebar: TsgcHTMLComponent_Sidebar;
begin
  oSidebar := TsgcHTMLComponent_Sidebar.Create(nil);
  try
    oSidebar.Brand := 'Dashboard';
    oSidebar.Width := '240px';
    oSidebar.Dark := True;

    with oSidebar.Items.Add do begin Text := 'Main'; Header := True; end;
    with oSidebar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oSidebar.Items.Add do begin Text := 'Reports'; Href := '/reports'; end;
    oSidebar.Items.Add.Divider := True;
    with oSidebar.Items.Add do begin Text := 'Settings'; Href := '/settings'; end;

    oSidebar.FooterText := 'v2.0';

    WebModule.Response := oSidebar.HTML;   // vertical <div> nav
  finally
    oSidebar.Free;
  end;
end;

// includes: sgcHTML_Component_Sidebar.hpp

TsgcHTMLComponent_Sidebar *oSidebar = new TsgcHTMLComponent_Sidebar(NULL);
try
{
  oSidebar->Brand = "Dashboard";
  oSidebar->Width = "240px";
  oSidebar->Dark = true;

  TsgcHTMLSidebarItem *oItem = oSidebar->Items->Add();
  oItem->Text = "Main"; oItem->Header = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Reports"; oItem->Href = "/reports";
  oSidebar->Items->Add()->Divider = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Settings"; oItem->Href = "/settings";

  oSidebar->FooterText = "v2.0";

  String html = oSidebar->HTML;   // vertical <div> nav
}
__finally
{
  delete oSidebar;
}

using esegece.sgcWebSockets;

var sidebar = new TsgcHTMLComponent_Sidebar();
sidebar.Brand = "Dashboard";
sidebar.Width = "240px";
sidebar.Dark = true;

var item = sidebar.Items.Add();
item.Text = "Main"; item.Header = true;
item = sidebar.Items.Add(); item.Text = "Home"; item.Href = "/"; item.Active = true;
item = sidebar.Items.Add(); item.Text = "Reports"; item.Href = "/reports";
sidebar.Items.Add().Divider = true;
item = sidebar.Items.Add(); item.Text = "Settings"; item.Href = "/settings";

sidebar.FooterText = "v2.0";

string html = sidebar.HTML;   // vertical <div> nav

Referencia

Propiedades y métodos clave

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

Marca

Brand define el encabezado que se muestra en la parte superior del panel; BrandHref es el enlace al que apunta (por defecto #).

Elementos

Items.Add devuelve un TsgcHTMLSidebarItem; define Text, Href, Icon y Active para un enlace, o marca Header / Divider para un título de sección o una línea.

Tema

Dark (por defecto True) alterna entre fondos oscuros y claros y el color de texto de enlace correspondiente.

Diseño

Width define el ancho del panel (por defecto 250px); Fixed lo fija al borde izquierdo; SidebarID y CSSClass definen el id y las clases adicionales.

Pie

FooterHTML inyecta marcado en bruto debajo de un separador, o FooterText genera un texto atenuado cuando no se ha definido HTML.

Salida

HTML devuelve la navegación vertical completa en <div> — sírvela o asígnala 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

Sidebar