Componente ProgressBar — sgcHTML | eSeGeCe

ProgressBar

TsgcHTMLComponent_ProgressBar — una barra de progreso de Bootstrap, con rayas y animada, con una etiqueta opcional, o una barra apilada de múltiples segmentos, en Delphi, C++ Builder y .NET.

TsgcHTMLComponent_ProgressBar

Define Value y Max para una barra única, o añade entradas a Bars para una barra apilada de múltiples segmentos, luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_ProgressBar

Genera

Barra de progreso .progress de Bootstrap 5 (única o apilada)

Lenguajes

Delphi, C++ Builder, .NET

Define el valor, dale estilo, renderízalo

Define Value, Max y ColorStyle, activa Striped / Animated / ShowLabel según sea necesario, luego lee 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";

Propiedades y métodos clave

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

Barra única

Value y Max (por defecto 100) definen el ancho de relleno como porcentaje; ColorStyle elige el color de Bootstrap, o define un color CSS directo con Color.

Etiqueta

ShowLabel renderiza el texto del porcentaje dentro de la barra; LabelFormat (por defecto %d%%) controla su formato.

Rayas y animación

Striped añade rayas diagonales; Animated implica rayas y las anima a lo largo de la barra.

Segmentos apilados

Bars.Add añade un TsgcHTMLProgressBarItem (Value, ColorStyle / Color, Label_); en cuanto Bars tiene entradas, estas sustituyen a la barra única de Value.

Tamaño e identidad

Height define una altura de barra CSS personalizada; ProgressBarID (o ElementID) nombra el <div class="progress"> exterior para el envío de fragmentos.

Salida

HTML devuelve el contenedor de progreso junto con su(s) segmento(s) de barra, listo para incrustar o enviar por WebSockets a medida que cambia el valor.

Sigue explorando

Ayuda en líneaReferencia completa de la API y guía de uso para este componente.
Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.
Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.
PreciosLicencias Single, Team y Site con código fuente completo.

¿Listo para empezar?

Descarga la prueba gratuita y añade barras de progreso a tu aplicación web Delphi, C++ Builder o .NET.