ProgressBar 组件 — sgcHTML | eSeGeCe

ProgressBar

TsgcHTMLComponent_ProgressBar — 一个带条纹和动画效果的 Bootstrap 进度条,支持可选标签,或堆叠的多段进度条,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_ProgressBar

为单个进度条设置 ValueMax,或向 Bars 添加条目以获得堆叠的多段进度条,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_ProgressBar

渲染为

Bootstrap 5 .progress 进度条(单条或堆叠)

语言

Delphi, C++ Builder, .NET

设置数值、设置样式、渲染它

设置 ValueMaxColorStyle,根据需要开启 Striped / Animated / ShowLabel,然后读取 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";

关键属性与方法

您最常使用的成员。

单条进度条

ValueMax(默认 100)以百分比设置填充宽度;ColorStyle 选择 Bootstrap 颜色,或使用 Color 设置原始 CSS 颜色。

标签

ShowLabel 在进度条内渲染百分比文本;LabelFormat(默认 %d%%)控制其格式。

条纹与动画

Striped 添加对角条纹;Animated 隐含条纹效果,并使其在进度条上产生动画。

堆叠分段

Bars.Add 追加一个 TsgcHTMLProgressBarItemValueColorStyle / ColorLabel_);一旦 Bars 中有条目,它们将取代单条 Value 进度条。

尺寸与标识

Height 设置自定义 CSS 进度条高度;ProgressBarID(或 ElementID)为外层 <div class="progress"> 命名,用于片段推送。

输出

HTML 返回进度条容器及其分段,可随时嵌入,或在数值变化时通过 WebSocket 推送。

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,为您的 Delphi、C++ Builder 或 .NET Web 应用添加进度条。