ProgressBar-component — sgcHTML | eSeGeCe

ProgressBar

TsgcHTMLComponent_ProgressBar — een Bootstrap-voortgangsbalk, gestreept en geanimeerd, met optioneel label, of een gestapelde multisegmentbalk, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_ProgressBar

Stel Value en Max in voor een enkele balk, of voeg items toe aan Bars voor een gestapelde multisegmentbalk, en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_ProgressBar

Rendert

Bootstrap 5 .progress-balk (enkel of gestapeld)

Familie

Overlays en feedback

Talen

Delphi, C++ Builder, .NET

QuickStart

Stel de waarde in, stileer het, render het

Stel Value, Max en ColorStyle in, schakel indien nodig Striped / Animated / ShowLabel in en lees dan HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_ProgressBar;

var
  oBar: TsgcHTMLComponent_ProgressBar;
begin
  oBar := TsgcHTMLComponent_ProgressBar.Create(nil);
  try
    oBar.ProgressBarID := 'upload';
    oBar.Value := 72;
    oBar.Max := 100;
    oBar.ColorStyle := hcSuccess;
    oBar.Striped := True;
    oBar.Animated := True;
    oBar.ShowLabel := True;
    oBar.LabelFormat := '%d%% complete';

    WebModule.Response := oBar.HTML;   // Bootstrap progress bar
  finally
    oBar.Free;
  end;
end;

// Or a stacked, multi-segment bar:
with oBar.Bars.Add do
begin
  Value := 40;
  ColorStyle := hcPrimary;
  Label_ := 'Done';
end;
with oBar.Bars.Add do
begin
  Value := 20;
  ColorStyle := hcWarning;
  Label_ := 'In progress';
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_ProgressBar.hpp

TsgcHTMLComponent_ProgressBar *oBar = new TsgcHTMLComponent_ProgressBar(NULL);
try
{
  oBar->ProgressBarID = "upload";
  oBar->Value = 72;
  oBar->Max = 100;
  oBar->ColorStyle = hcSuccess;
  oBar->Striped = true;
  oBar->Animated = true;
  oBar->ShowLabel = true;
  oBar->LabelFormat = "%d%% complete";

  String html = oBar->HTML;   // Bootstrap progress bar

  // Or a stacked, multi-segment bar:
  TsgcHTMLProgressBarItem *oSeg1 = oBar->Bars->Add();
  oSeg1->Value = 40;
  oSeg1->ColorStyle = hcPrimary;
  oSeg1->Label_ = "Done";

  TsgcHTMLProgressBarItem *oSeg2 = oBar->Bars->Add();
  oSeg2->Value = 20;
  oSeg2->ColorStyle = hcWarning;
  oSeg2->Label_ = "In progress";
}
__finally
{
  delete oBar;
}

using esegece.sgcWebSockets;

var bar = new TsgcHTMLComponent_ProgressBar();
bar.ProgressBarID = "upload";
bar.Value = 72;
bar.Max = 100;
bar.ColorStyle = TsgcHTMLColor.hcSuccess;
bar.Striped = true;
bar.Animated = true;
bar.ShowLabel = true;
bar.LabelFormat = "%d%% complete";

string html = bar.HTML;   // Bootstrap progress bar

// Or a stacked, multi-segment bar:
var seg1 = bar.Bars.Add();
seg1.Value = 40;
seg1.ColorStyle = TsgcHTMLColor.hcPrimary;
seg1.Label_ = "Done";

var seg2 = bar.Bars.Add();
seg2.Value = 20;
seg2.ColorStyle = TsgcHTMLColor.hcWarning;
seg2.Label_ = "In progress";

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Enkele balk

Value en Max (standaard 100) bepalen de vulbreedte als percentage; ColorStyle kiest de Bootstrap-kleur, of stel een eigen CSS-kleur in met Color.

Label

ShowLabel rendert de percentagetekst in de balk; LabelFormat (standaard %d%%) bepaalt de opmaak.

Gestreept en geanimeerd

Striped voegt diagonale strepen toe; Animated impliceert gestreept en animeert de strepen over de balk.

Gestapelde segmenten

Bars.Add voegt een TsgcHTMLProgressBarItem toe (Value, ColorStyle / Color, Label_); zodra Bars items bevat, vervangen ze de enkele Value-balk.

Formaat en identiteit

Height stelt een eigen CSS-hoogte in; ProgressBarID (of ElementID) benoemt de buitenste <div class="progress"> voor fragment-pushes.

Uitvoer

HTML retourneert de progress-wrapper plus de balksegment(en), klaar om in te sluiten of via WebSockets te pushen zodra de waarde verandert.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen