In één oogopslag

Een navigatiecomponent dat een Bootstrap-<div class="btn-toolbar"> van btn-groups uitstuurt, gescheiden door scheidingstekens. Voeg knoppen (en scheidingstekens) toe en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Toolbar

Rendert

Bootstrap-btn-toolbar-markup

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg knoppen toe, render hem

Roep AddButton aan voor elke knop en AddSeparator om de groepen te scheiden, en lees dan HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_Toolbar;

var
  oToolbar: TsgcHTMLComponent_Toolbar;
begin
  oToolbar := TsgcHTMLComponent_Toolbar.Create(nil);
  try
    oToolbar.Size := tbsDefault;

    oToolbar.AddButton('New', bsPrimary, '/new');
    oToolbar.AddButton('Edit', bsOutlinePrimary, '/edit');
    oToolbar.AddSeparator;
    oToolbar.AddButton('Delete', bsOutlineDanger, '/delete');

    WebModule.Response := oToolbar.HTML;   // <div class="btn-toolbar">
  finally
    oToolbar.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Toolbar.hpp

TsgcHTMLComponent_Toolbar *oToolbar = new TsgcHTMLComponent_Toolbar(NULL);
try
{
  oToolbar->Size = tbsDefault;

  oToolbar->AddButton("New", bsPrimary, "/new");
  oToolbar->AddButton("Edit", bsOutlinePrimary, "/edit");
  oToolbar->AddSeparator();
  oToolbar->AddButton("Delete", bsOutlineDanger, "/delete");

  String html = oToolbar->HTML;   // <div class="btn-toolbar">
}
__finally
{
  delete oToolbar;
}

using esegece.sgcWebSockets;

var toolbar = new TsgcHTMLComponent_Toolbar();
toolbar.Size = TsgcHTMLToolbarSize.tbsDefault;

toolbar.AddButton("New", TsgcHTMLButtonStyle.bsPrimary, "/new");
toolbar.AddButton("Edit", TsgcHTMLButtonStyle.bsOutlinePrimary, "/edit");
toolbar.AddSeparator();
toolbar.AddButton("Delete", TsgcHTMLButtonStyle.bsOutlineDanger, "/delete");

string html = toolbar.HTML;   // <div class="btn-toolbar">

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Knoppen

AddButton(text, style, href) voegt een knop toe; zonder href rendert het een <button>, anders een anker met knopstijl.

Groepen

AddSeparator sluit de huidige btn-group af en start een nieuwe met een kleine tussenruimte, zodat knoppen in logische groepen samenkomen.

Items

Items.Add retourneert een TsgcHTMLToolbarItem voor fijnere controle: stel Text, Href, ButtonStyle, Icon, Disabled, Separator en Tooltip in.

Stijl

Per item kiest ButtonStyle elke TsgcHTMLButtonStyle (solide of outline-variant, standaard bsOutlinePrimary); Tooltip koppelt een Bootstrap-tooltip.

Grootte

Size selecteert tbsDefault, tbsSmall of tbsLarge, toegepast op elke knoppengroep; ToolbarID stelt de id in.

Uitvoer

HTML retourneert de volledige <div class="btn-toolbar"> met zijn knoppengroepen — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Toolbar

TsgcHTMLComponent_Toolbar