ProgressBar
TsgcHTMLComponent_ProgressBar — Delphi, C++ Builder 및 .NET에서 선택적 레이블을 갖춘 줄무늬 및 애니메이션 Bootstrap 진행률 바, 또는 스택형 다중 세그먼트 바입니다.
TsgcHTMLComponent_ProgressBar — Delphi, C++ Builder 및 .NET에서 선택적 레이블을 갖춘 줄무늬 및 애니메이션 Bootstrap 진행률 바, 또는 스택형 다중 세그먼트 바입니다.
단일 바를 위해 Value와 Max를 설정하거나, 스택형 다중 세그먼트 바를 위해 Bars에 항목을 추가한 다음, HTML 속성을 읽습니다.
TsgcHTMLComponent_ProgressBar
Bootstrap 5 .progress 바(단일 또는 스택형)
Delphi, C++ Builder, .NET
Value, Max 및 ColorStyle을 설정하고, 필요에 따라 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";가장 자주 사용하게 되는 멤버.
Value와 Max(기본값 100)는 채움 너비를 백분율로 설정합니다. ColorStyle은 Bootstrap 색상을 선택하며, Color로 원시 CSS 색상을 직접 지정할 수도 있습니다.
ShowLabel은 바 안에 백분율 텍스트를 렌더링합니다. LabelFormat(기본값 %d%%)이 형식을 제어합니다.
Striped는 대각선 줄무늬를 추가합니다. Animated는 줄무늬를 포함하며 바 전체에 애니메이션을 적용합니다.
Bars.Add는 TsgcHTMLProgressBarItem(Value, ColorStyle / Color, Label_)을 추가합니다. Bars에 항목이 있으면 단일 Value 바를 대체합니다.
Height는 사용자 지정 CSS 바 높이를 설정합니다. ProgressBarID(또는 ElementID)는 프래그먼트 푸시를 위해 외부 <div class="progress">의 이름을 지정합니다.
HTML은 진행률 래퍼와 바 세그먼트를 반환하며, 값이 바뀔 때 바로 삽입하거나 WebSocket으로 푸시할 수 있습니다.