sgcHTML 新增六个表单输入组件：MultiSelect、ColorPicker、Slider、TimePicker、SignaturePad 和 Transfer | eSeGeCe 博客

sgcHTML 新增六个表单输入组件：MultiSelect、ColorPicker、Slider、TimePicker、SignaturePad 和 Transfer

· 组件

这是关于 sgcHTML 25 个新组件系列文章的第三篇。这次是表单：六种几乎每个管理界面都需要手动搭建的输入控件—标签选择器、颜色样板、范围滑块、时间字段、签名采集，以及双栏角色分配器。每一个都是普通的 Delphi/C++Builder/.NET 组件：配置它，读取 HTML，它会通过与任何其他表单字段相同的请求周期回传。

MultiSelect — 带标签芯片的多选下拉框

TsgcHTMLComponent_MultiSelect 是一个可搜索的下拉框，允许访问者选择多个值，以可移除的标签芯片形式显示，并可通过可选的 MaxSelections 设置选择数量上限。可以逐个添加选项，也可以直接绑定数据集。

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');

ColorPicker — 原生输入框加一键预设色板

TsgcHTMLComponent_ColorPicker 在原生 HTML5 颜色输入框基础上，加入了可选的十六进制文本框，以及一排一键选取的预设色板—适用于从品牌色设置到日历事件标签颜色等各种场景。

uses
  sgcHTML_Component_ColorPicker;

var
  oColor: TsgcHTMLComponent_ColorPicker;
begin
  oColor := TsgcHTMLComponent_ColorPicker.Create(nil);
  try
    oColor.FieldName := 'brand_color';
    oColor.LabelText := 'Brand color';
    oColor.Value := '#0d6efd';
    oColor.ShowValueInput := True;

    oColor.Swatches.Add('#0d6efd');
    oColor.Swatches.Add('#198754');
    oColor.Swatches.Add('#dc3545');

    WebModule.Response := oColor.HTML;   // color input + hex field + swatches
  finally
    oColor.Free;
  end;
end;

// Or the static one-liner (field name, value, label):
Result := TsgcHTMLComponent_ColorPicker.Build('brand_color', '#0d6efd', 'Brand color');

Slider — 带实时数值徽章的范围输入框

TsgcHTMLComponent_Slider 是一个 Bootstrap 范围滑块，带有最小/最大值标签，以及一个随拖动实时更新当前数值的徽章，颜色可与你的主题相匹配。

uses
  sgcHTML_Enums, sgcHTML_Component_Slider;

var
  oSlider: TsgcHTMLComponent_Slider;
begin
  oSlider := TsgcHTMLComponent_Slider.Create(nil);
  try
    oSlider.FieldName := 'volume';
    oSlider.LabelText := 'Volume';
    oSlider.Min := 0;
    oSlider.Max := 100;
    oSlider.Step := 5;
    oSlider.Value := 50;
    oSlider.ShowMinMax := True;
    oSlider.ColorStyle := hcSuccess;

    WebModule.Response := oSlider.HTML;   // form-range + live value badge
  finally
    oSlider.Free;
  end;
end;

TimePicker — 限定范围的时间输入

TsgcHTMLComponent_TimePicker 是一个原生时间输入框，可配置 MinTime/MaxTime 范围—适用于预约时间、营业时间、排班等场景的字段。它同样提供了静态的 Build 辅助方法。

uses
  sgcHTML_Component_TimePicker;

var
  oTime: TsgcHTMLComponent_TimePicker;
begin
  oTime := TsgcHTMLComponent_TimePicker.Create(nil);
  try
    oTime.FieldName := 'appointment_time';
    oTime.LabelText := 'Appointment time';
    oTime.MinTime := '08:00';
    oTime.MaxTime := '18:00';
    oTime.Required := True;

    WebModule.Response := oTime.HTML;   // <input type="time">
  finally
    oTime.Free;
  end;
end;

// Or the static one-liner (field name, label, value):
Result := TsgcHTMLComponent_TimePicker.Build('appointment_time', 'Appointment time');

SignaturePad — 画布签名采集

TsgcHTMLComponent_SignaturePad 渲染一个支持指针事件的画布，带有清除、撤销和保存按钮，可配置画笔颜色和粗细，并可设置采集到的图像上传所用的 UploadURL。送达确认、合同签署、免责声明表单—任何曾经需要手写签名、如今变成屏幕轻点的场景都适用。

uses
  sgcHTML_Component_SignaturePad;

var
  oPad: TsgcHTMLComponent_SignaturePad;
begin
  oPad := TsgcHTMLComponent_SignaturePad.Create(nil);
  try
    oPad.FieldName := 'signature';
    oPad.Width := 500;
    oPad.Height := 220;
    oPad.PenColor := '#1a1a2e';
    oPad.PenWidth := 3;
    oPad.UploadURL := '/api/signatures/upload';

    WebModule.Response := oPad.HTML;   // <canvas> + Clear/Undo/Save buttons
  finally
    oPad.Free;
  end;
end;

Transfer — 双栏角色分配器

TsgcHTMLComponent_Transfer 是经典的双栏控件，用于在"可用"和"已分配"之间移动条目—适用于权限、角色、群组成员等场景。ShowFilter 会为每个面板添加搜索框，FieldName 会让已分配一侧以隐藏输入框的形式回传，因此表单提交无需额外处理即可正常工作。

uses
  sgcHTML_Component_Transfer;

var
  oTransfer: TsgcHTMLComponent_Transfer;
begin
  oTransfer := TsgcHTMLComponent_Transfer.Create(nil);
  try
    oTransfer.TransferID := 'roles';
    oTransfer.FieldName := 'roles';
    oTransfer.TitleSource := 'Available roles';
    oTransfer.TitleTarget := 'Assigned roles';
    oTransfer.ShowFilter := True;
    oTransfer.Height := '260px';

    oTransfer.AddItem('admin', 'Administrator');
    oTransfer.AddItem('editor', 'Editor', True);
    oTransfer.AddItem('viewer', 'Viewer');

    WebModule.Response := oTransfer.HTML;   // dual panels + buttons + script
  finally
    oTransfer.Free;
  end;
end;

// Or bind it straight to a dataset:
oTransfer.LoadFromDataSet(qryRoles, 'RoleId', 'RoleName', 'IsAssigned');

立即体验

完整文档、关键属性说明以及 Delphi/C++Builder/.NET 代码示例都可以在每个组件各自的页面上找到：MultiSelect、ColorPicker、Slider、TimePicker、SignaturePad 和 Transfer。接下来：徽章、PDF 查看，以及让繁忙界面响应更灵敏的组件。

有疑问、反馈，或需要迁移方面的帮助？联系我们—回复你的将是真正编写这些代码的人。