En bref

TsgcHTMLComponent_Sidebar

Un composant de navigation qui émet une barre latérale verticale Bootstrap 5 avec une marque optionnelle, des liens nav-pill, des en-têtes, des séparateurs et un pied de page. Ajoutez des éléments, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Sidebar

Produit

Du balisage de barre latérale Bootstrap 5

Famille

Navigation & Structure

Langages

Delphi, C++ Builder, .NET

QuickStart

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

Définissez Brand et Width, ajoutez des éléments (liens, en-têtes, séparateurs) dans Items, puis lisez 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

Référence

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

Les membres que vous utilisez le plus souvent.

Marque

Brand définit l'en-tête affiché en haut du panneau ; BrandHref est le lien vers lequel il pointe (par défaut #).

Items

Items.Add renvoie un TsgcHTMLSidebarItem ; définissez Text, Href, Icon et Active pour un lien, ou activez Header / Divider pour un titre de section ou une règle.

Thème

Dark (par défaut True) bascule entre les arrière-plans sombres et clairs et la couleur de texte des liens correspondante.

Mise en page

Width définit la largeur du panneau (par défaut 250px) ; Fixed l'épingle au bord gauche ; SidebarID et CSSClass définissent l'identifiant et les classes supplémentaires.

Pied de page

FooterHTML injecte du balisage brut sous un séparateur, ou FooterText rend une légende atténuée lorsqu'aucun HTML n'est défini.

Sortie

HTML renvoie le <div> de navigation verticale complet — 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

Sidebar