库中的每个组件，分为十个系列。每一个都渲染为 Bootstrap 5 标记，在 Delphi、C++ Builder 和 .NET 中的工作方式相同。大多数组件都是数据感知的，可通过 LoadFromDataSet / DataSource（或等效的 .NET 数据源）直接绑定到 TDataSet。点击某个组件可进入其专属页面，查看用法和示例。所有组件都会对 HTML、属性、JavaScript 和 URL 自动进行输出编码并对 URL 进行净化，因此动态内容默认经过转义，以防范 XSS 和注入攻击。
直接渲染您数据集的网格、日历和看板。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | 功能丰富的表格：排序、筛选、CSV/PDF 导出、内联编辑、分组、虚拟滚动和 AI 查询。 | 文杠 |
| DataTable | TsgcHTMLComponent_DataTable | 更高级的数据表，封装了 Grid + Pagination，带有工具栏、搜索和行数统计。 | 文杠 |
| Calendar | TsgcHTMLComponent_Calendar | 月历网格，带有事件圆点和上一月/下一月导航。 | 文杠 |
| Scheduler | TsgcHTMLComponent_Scheduler | 日历日程表（月 / 周视图），按日期渲染事件。 | 文杠 |
| Timeline | TsgcHTMLComponent_Timeline | 带日期的事件垂直时间线，可从数据集加载。 | 文杠 |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | 由列和可拖动卡片组成的看板。 | 文杠 |
| Gantt | TsgcHTMLComponent_Gantt | 甘特项目时间线图表，带有任务进度条。 | 文杠 |
| TreeGrid | TsgcHTMLComponent_TreeGrid | 基于 Id/ParentId 节点对构建的 Bootstrap 表格，支持可折叠的层次化行。 | 文杠 |
| PivotTable | TsgcHTMLComponent_PivotTable | Bootstrap 数据透视表，对行和列进行分组并汇总度量值，包含行、列和总计。 | 文杠 |
| ActivityFeed | TsgcHTMLComponent_ActivityFeed | 实时的、按最新优先排序的活动信息流，带有相对时间戳和带外 WebSocket 推送。 | 文杠 |
| AuditTrail | TsgcHTMLComponent_AuditTrail | 按时间顺序排列的审计日志信息流，记录用户和系统操作，包含操作者、操作、目标和时间戳。 | 文档 |
由您自己的数据构建的数据驱动视觉效果。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js 图表：折线图、柱状图、饼图、环形图、雷达图、极坐标图、气泡图和散点图。 | 文杠 |
| Gauge | TsgcHTMLComponent_Gauge | 半圆形 SVG 仪表盘，带有低 / 中 / 高颜色阈值，或者绘制带刻度、彩色区间和指针的 90 度、180 度或 270 度刻度盘。 | 文杠 |
| Diagram | TsgcHTMLComponent_Diagram | 渲染为内联 SVG 的节点与箭头流程图。 | 文杠 |
| Map | TsgcHTMLComponent_Map | Leaflet.js 交互式地图（OpenStreetMap / CartoDB 瓦片），带有标记。 | 文杠 |
| Heatmap | TsgcHTMLComponent_Heatmap | 基于单元格数值或绑定数据集的颜色渐变 SVG 热力图网格，带有图例和行/列标签。 | 文杠 |
| Sparkline | TsgcHTMLComponent_Sparkline | 紧凑的内联 SVG 折线、柱状或面积迷你图，数据来自数值序列或绑定数据集。 | 文杠 |
| CandlestickChart | TsgcHTMLComponent_CandlestickChart | 带有影线、涨跌颜色和可选成交量条的 SVG OHLC 蜡烛图。 | 文杠 |
| QRCode | TsgcHTMLComponent_QRCode | 纯 Pascal 实现的 ISO/IEC 18004 SVG 二维码，可基于任意文本或 URL 生成，并可选择纠错级别。 | 文杠 |
| Barcode | TsgcHTMLComponent_Barcode | 纯 Pascal 实现的 Code 128 SVG 条形码，可基于任意 ASCII 文本生成，带有可选的人类可读标题。 | 文杠 |
| TreeMap | TsgcHTMLComponent_TreeMap | 以自包含、服务器端生成的内联 SVG 渲染的方块化矩形树图，无需图表库。 | 文杠 |
捕获数据所需的一切，带有验证和数据集绑定。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | 数据驱动的表单构建器，带有验证、布局和 AI 表单生成。 | 文杠 |
| Edit | TsgcHTMLComponent_Edit | 单行文本输入框，带有标签、帮助文本和数据集绑定。 | 文杠 |
| Memo | TsgcHTMLComponent_Memo | 多行文本区输入，带有标签和帮助文本。 | 文杠 |
| CheckBox | TsgcHTMLComponent_CheckBox | 复选框输入，带有标签和选中状态。 | 文杠 |
| RadioGroup | TsgcHTMLComponent_RadioGroup | 一组相互排斥的单选选项。 | 文杠 |
| Select | TsgcHTMLComponent_Select | 下拉选择框，带有选项组、多选和数据集绑定。 | 文杠 |
| InputGroup | TsgcHTMLComponent_InputGroup | 带有前置 / 后置附加文本的输入框。 | 文杠 |
| AutoComplete | TsgcHTMLComponent_AutoComplete | 由 HTML5 datalist 建议支持的文本输入。 | 文杠 |
| DatePicker | TsgcHTMLComponent_DatePicker | 原生日期 / 时间 / 日期时间输入字段。 | 文杠 |
| FileUpload | TsgcHTMLComponent_FileUpload | 拖放式文件上传区域，带有 multipart 表单提交。 | 文杠 |
| RichEditor | TsgcHTMLComponent_RichEditor | 基于 Quill 的所见即所得富文本编辑器，带有隐藏的表单字段。 | 文杠 |
| Rating | TsgcHTMLComponent_Rating | 星级（符号）评分显示或输入。 | 文杠 |
| MultiSelect | TsgcHTMLComponent_MultiSelect | 可搜索的 Bootstrap 多选下拉框，带有标签芯片、分组选项和数据集绑定。 | 文杠 |
| ColorPicker | TsgcHTMLComponent_ColorPicker | 原生 HTML5 颜色输入框，带有可选的十六进制文本字段和预设色板。 | 文杠 |
| Slider | TsgcHTMLComponent_Slider | Bootstrap 范围滑块，带有实时数值徽章、最小/最大值标签和颜色样式。 | 文杠 |
| TimePicker | TsgcHTMLComponent_TimePicker | 原生 HTML5 时间输入框，带有最小/最大值范围和秒级精度。 | 文杠 |
| SignaturePad | TsgcHTMLComponent_SignaturePad | 基于指针事件的画布签名板，带有清除、撤销和保存操作。 | 文杠 |
| Transfer | TsgcHTMLComponent_Transfer | 双列表框控件，用于在“可选”和“已选”面板之间移动项目，带有筛选和数据集绑定。 | 文杠 |
| DateTimePicker | TsgcHTMLComponent_DateTimePicker | 原生 HTML5 日期时间选择器，在单个字段中结合日历和时钟。 | 文档 |
| DateRangePicker | TsgcHTMLComponent_DateRangePicker | 成对的开始和结束日期输入框，用于选择日期范围，带有最小/最大值边界。 | 文档 |
| RangeSlider | TsgcHTMLComponent_RangeSlider | 双滑块，用于选择一对低/高值，带有实时数值徽章。 | 文档 |
| CameraScanner | TsgcHTMLComponent_CameraScanner | 实时摄像头面板，使用浏览器原生 BarcodeDetector 扫描条形码和二维码，无需第三方库。 | 文档 |
| Geolocation | TsgcHTMLComponent_Geolocation | 使用浏览器 Geolocation API 读取设备位置，可单次或持续读取，并通过隐藏字段、POST、重定向或 WebSocket 消息把纬度、经度和精度送达服务器。 | 文档 |
| NumPad | TsgcHTMLComponent_NumPad | 用于销售点录入的触控数字/货币键盘，带有快捷金额按钮和与地区设置无关的格式化。 | 文档 |
用于布局页面的卡片、媒体和 KPI 磁贴。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Bootstrap 卡片面板，带有页眉 / 主体 / 页脚，可折叠、可滚动。 | 文杠 |
| StatCard | TsgcHTMLComponent_StatCard | 仪表板 KPI / 统计卡片，带有图标、趋势箭头和可选渐变。 | 文杠 |
| Accordion | TsgcHTMLComponent_Accordion | 由可堆叠展开面板组成的垂直折叠手风琴。 | 文杠 |
| Carousel | TsgcHTMLComponent_Carousel | 图片幻灯片 / 轮播，带有指示器、控件和自动播放。 | 文杠 |
| Image | TsgcHTMLComponent_Image | 图片，带有形状、响应式 / 懒加载、灯箱链接和标题。 | 文杠 |
| Avatar | TsgcHTMLComponent_Avatar | 用户头像（图片或首字母），带有尺寸、形状和在线状态圆点。 | 文杠 |
| Video | TsgcHTMLComponent_Video | HTML5 视频 / 音频播放器，外加 YouTube 嵌入辅助功能。 | 文杠 |
| Badge | TsgcHTMLComponent_Badge | 单个 Bootstrap 徽章，带有颜色、胶囊形状、内联图标和定位式通知圆点模式。 | 文杠 |
| PDFViewer | TsgcHTMLComponent_PDFViewer | 由 pdf.js 驱动的页内 PDF 查看器，带有翻页、缩放、搜索、下载和打印功能。 | 文杠 |
| Chip | TsgcHTMLComponent_Chip | 紧凑的芯片 / 标签，带有可选的图标、颜色和可移除的关闭按钮。 | 文档 |
对话框、状态展示和加载状态。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | 模态对话框，带有标题 / 主体 / 页脚、多种尺寸、居中和静态背景。 | 文杠 |
| Offcanvas | TsgcHTMLComponent_Offcanvas | 从左、右、上或下滑入的画布外面板。 | 文杠 |
| Popover | TsgcHTMLComponent_Popover | 触发元素上的弹出气泡（点击 / 悬停 / 聚焦）。 | 文杠 |
| Toast | TsgcHTMLComponent_Toast | Toast 通知，带有页眉、主体、时间戳和自动隐藏。 | 文杠 |
| Snackbar | TsgcHTMLComponent_Snackbar | Material 风格的瞬时 snackbar，带有可选操作。 | 文杠 |
| Notification | TsgcHTMLComponent_Notification | 铃铛图标下拉通知中心，带有未读徽章。 | 文杠 |
| Spinner | TsgcHTMLComponent_Spinner | 加载旋转器（边框 / 增长），可设置尺寸和颜色。 | 文杠 |
| Placeholder | TsgcHTMLComponent_Placeholder | 骨架 / 占位加载卡片，带有动画微光效果。 | 文杠 |
| ContextMenu | TsgcHTMLComponent_ContextMenu | 作用域限定于 CSS 选择器的右键下拉菜单，带有图标、分隔符、标题和服务器路由操作。 | 文杠 |
| JobProgress | TsgcHTMLComponent_JobProgress | 后台任务进度条的实时列表，带有状态徽章、取消按钮和带外片段更新。 | 文杠 |
| LogViewer | TsgcHTMLComponent_LogViewer | 流式日志 / 终端查看器，带有级别筛选、搜索和自动滚动。 | 文杠 |
| ProgressBar | TsgcHTMLComponent_ProgressBar | Bootstrap 进度条，支持条纹和动画效果，可为单段或堆叠式多段。 | 文杠 |
| CommandPalette | TsgcHTMLComponent_CommandPalette | Ctrl+K / Cmd+K 快速操作启动器，支持先子串后模糊的筛选、分类和服务器路由的操作。 | 文杠 |
| EmptyState | TsgcHTMLComponent_EmptyState | 表格、列表或搜索结果没有数据行时显示的面板，带有图标、标题、描述和最多两个按钮。 | 文杠 |
会话式 UI，从简单的气泡到流式 AI 助手。
现成的登录流程，从密码到通行密钥。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | 现成的登录表单 / 页面（卡片、居中或全页），带有记住我和提示。 | 文杠 |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth 社交登录按钮面板（Google、Facebook、Apple、GitHub、Microsoft 等）。 | 文杠 |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | OAuth 回调 / 落地页，处于成功、错误或加载状态，并自动重定向。 | 文杠 |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | 无密码的通行密钥 / WebAuthn 登录和注册控件。 | 文杠 |
| RolesPermissions | TsgcHTMLComponent_RolesPermissions | 角色 / 权限矩阵，每个单元格带有复选框，并支持实时 WebSocket 授权更新。 | 文杠 |
| UserManagement | TsgcHTMLComponent_UserManagement | 用户管理表格，包含角色、状态、搜索和逐行操作下拉菜单。 | 文杠 |
| ImpersonateBanner | TsgcHTMLComponent_ImpersonateBanner | 管理员模拟横幅，在以其他用户身份操作时显示，带有一键退出。 | 文档 |
仪表、指示灯、显示器、操作控制件、实时趋势图和过程示意图，全部由服务器在浏览器中保持实时更新。纯 HTML 和内联 SVG，无需 JavaScript 库。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| LinearGauge | TsgcHTMLComponent_LinearGauge | 直线形 SVG 仪表，可绘制为条形、温度计或水箱样式，带刻度标尺、彩色区间和数值读数。 | Docs |
| LED | TsgcHTMLComponent_LED | 开关指示灯，圆形或方形，可选发光效果、闪烁和说明文字。 | Docs |
| LEDBar | TsgcHTMLComponent_LEDBar | 分段 LED 条形图，由多个独立指示灯组成的经典电平表。 | Docs |
| SegmentDisplay | TsgcHTMLComponent_SegmentDisplay | 以 7 段或 14 段 LED 显示屏样式展示文本，带虚影段和可选的斜体倾斜效果。 | Docs |
| Odometer | TsgcHTMLComponent_Odometer | 机械计数器，数字滚轮会滚动到新的数值。 | Docs |
| AnalogClock | TsgcHTMLComponent_AnalogClock | 带时针、分针和秒针的模拟时钟表盘，可静止显示或在浏览器中实时走动。 | Docs |
| Compass | TsgcHTMLComponent_Compass | 指南针或航向指示器，采用旋转刻度盘或旋转指针，并可选目标标记。 | Docs |
| VUMeter | TsgcHTMLComponent_VUMeter | 以分贝为单位的音频 VU 表，可选经典指针表或条形表样式，并支持可选的峰值保持。 | Docs |
| Knob | TsgcHTMLComponent_Knob | 旋钮控件，可用指针、键盘或鼠标滚轮转动，并提交所选数值。 | Docs |
| ToggleSwitch | TsgcHTMLComponent_ToggleSwitch | 开关控件，可选滑动开关或工业跷板样式，切换时提交 1 或 0。 | Docs |
| PushButton | TsgcHTMLComponent_PushButton | 带状态指示灯的命令按钮，可选点击式或点动式（按住运行）按钮，并支持可选的页内确认。 | Docs |
| NumericStepper | TsgcHTMLComponent_NumericStepper | 带增减按钮的数值输入框，按住时可连续变化，数值限定在设定范围内。 | Docs |
| StripChart | TsgcHTMLComponent_StripChart | 在画布上滚动显示的多笔条形图记录仪，如同实体记录仪，由服务器实时推送样本数据。 | Docs |
| Oscilloscope | TsgcHTMLComponent_Oscilloscope | 示波器屏幕，带分格网线、每通道独立刻度、边沿触发和可选余辉效果。 | Docs |
| Annunciator | TsgcHTMLComponent_Annunciator | 报警指示面板：一个带说明文字的方块网格，按状态点亮，并可由操作员确认。 | Docs |
| SCADAPanel | TsgcHTMLComponent_SCADAPanel | 以 SVG 形式呈现的过程模拟示意图（水箱、阀门、水泵、电机、风机、换热器、传感器和管道），带实时状态、流动动画和可点击符号。 | Docs |
| MQTT 绑定 | TsgcHTMLInstrumentsMQTTBinder | 无需编写代码即可将 MQTT 主题映射到仪表：绑定主题上的每条消息都会更新对应仪表，并将其实时片段广播给浏览器。 | Docs |
| Instruments 绑定器 | TsgcHTMLInstrumentsBinder | 相同的绑定机制，但不依赖特定传输方式：可从任意来源（AMQP、Kafka 或自定义客户端）将消息传递给 ProcessMessage。 | Docs |
Gauge 组件也得到了扩展：除了半圆形仪表盘外，它还可以绘制带刻度、彩色区间和指针的 90 度、180 度或 270 度刻度盘，并像其他仪表一样实时更新。可以在 仪表 和 SCADA / IoT 在线演示中查看它们的实际运行效果。
提供页面服务并保持其实时性的非可视化部件。
| 组件 | 类 | 说明 | 帮助 |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | 绑定到 TsgcWebSocketHTTPServer 的 HTML 引擎，提供渲染后的页面和内嵌资源。 | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | 接入同一服务器的 htmx 引擎。它挂接 HTTP 和 WebSocket 处理器，分发传入的请求和消息，并实时向已连接的浏览器推送或广播 HTML 片段（DispatchRequest、DispatchMessage、PushFragment、BroadcastFragment）。 | Docs |
| PageBuilder | TsgcHTMLPageBuilder | 将已注册的组件组装成完整的响应式页面（带有设计时可视化编辑器）。 | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | 将主体内容包装成完整的 Bootstrap 5 HTML 文档，带有主题、语言和方向。 | Docs |
| ThemeController | TsgcHTMLThemeController | 运行时主题切换器，其 Theme 属性（ptDefault、ptDark、ptDarkPro）将选定的主题和共享样式表应用到页面。 | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | CSS 生成器，其 Mode（tmLight、tmDark、tmSystem）根据属性值写入 Bootstrap CSS 变量，并可为 tmSystem 附带一个可选的操作系统偏好同步脚本。 | Docs |
| HTMXFragment | TsgcHTMX_Fragment | 用于从服务器向浏览器推送局部页面更新的带外 htmx 片段。 | Docs |
| HTMXRouter | TsgcHTMX_Router | 由 Routes 组成的路由表，匹配传入的请求路径，并（通过 HandleRequest）将其分发到该路由的 OnRoute 处理器。 | Docs |
这些组件是对上面列出的 110 个组件的补充，不计入上面的系列数量。
| 组件 | 类 | 描述 | 帮助 |
|---|---|---|---|
| CRUD | TsgcHTMLComponent_CRUD | 一张表的列表（含搜索和分页）、创建与编辑表单、删除确认和写入路径，基于数据集，或通过六方法适配器基于您自己的 SQL。 | Docs |
| NotificationInbox | TsgcHTMLComponent_NotificationInbox | 一个带有未读徽章的铃铛和某个用户的通知。您的应用用它保存的记录响应一个事件，并得知用户已读了什么。 | Docs |
| NotificationPreferences | TsgcHTMLComponent_NotificationPreferences | 一张表，每个类别一行，每个通道一个复选框（应用内、推送、电子邮件）。您的应用加载并保存这些值。 | Docs |
| WebPush | TsgcHTMLWebPush | 使用 VAPID 的 Web Push：验证浏览器回传的订阅，把它们交给您的应用，并向未运行的浏览器发送加密通知。仅限 Enterprise 和 All-Access 版本。 | Docs |
| Auth | TsgcHTMLAuth | Cookie 会话、记住我、CSRF 令牌、登录限流，以及按登录和角色的路由保护，基于内存或文件会话存储。 | Docs |
| MCPApp | TsgcHTMLComponent_MCPApp | 一个以页面作答的 MCP 工具，因此您已在使用的组件可以在 ChatGPT、Claude 和 VS Code 中渲染。 | Docs |
| AIAssistant | TsgcHTMLAIAssistant | 把用自然语言提出的问题转换为经过验证的一组筛选、排序、分组和高亮，用于网格、数据表、数据透视表或表单。未配置提供商时由内置解析器作答。 | Docs |
| InlineAIPrompt | TsgcHTMLComponent_InlineAIPrompt | 一个位于多行文本区、富文本编辑器或网格列旁边的弹出框，向助手提问，只有在用户接受时才报告答案。 | Docs |
引擎、页面模板和设计器新增的内容。每个选项默认都是关闭的，因此不使用它们的页面不受影响。
| 能力 | 新增内容 | 帮助 |
|---|---|---|
| 路由 | 带有 {name} 片段的模板路径、每个路由的 Methods 过滤器、RequireLogin 和 RequireRoles，以及与传输方式无关的分派，因此路由在 HTTP、WebSocket 或测试中运行方式完全相同。 | Docs |
| 导航与实时更新 | 八个页面模板选项，无需您自己编写 JavaScript，就能把服务器渲染的站点变成单页应用：增强的链接和表单、历史记录、morph 替换、视图过渡、加载条、滚动位置恢复、提交锁定和错误提示。它们默认全部关闭。 | Docs |
| WebSocket 或 SSE | 通过服务器发送事件而不是 WebSocket 进行实时更新，或者自动选择，在 WebSocket 无法打开时回退到事件流。标记、路由和片段保持不变。 | Docs |
| AI Data Pack | 用自然语言向网格、数据表、数据透视表或表单提问，只应用验证器放行的内容。模型收到列名、类型和三个示例值，只有在您开启 AllowRowDataToProvider 时才会收到行数据。使用提供商需要 Enterprise 或 All-Access 版本的 AI 单元，或者 sgcAI 包，内置解析器无需提供商即可作答。 | Docs |
| AI 页面生成器 | 在设计器中，描述一个页面或提供一张截图，它会用您注册的组件构建该页面，所用 schema 无法指名其他任何内容。在您接受之前不会应用任何内容。提供商需要相同的 AI 单元。 | Docs |
| ASP.NET Core Razor (.NET) | Telerik 和 DevExpress 风格的 Tag Helper，包括 <sgc-grid>、<sgc-form>、<sgc-autocomplete>、<sgc-dialog> 和 <sgc-chart>，并在 Html.Sgc() 下提供对应的流式写法。网格通过 this.SgcGrid(request, query) 在 IQueryable 上完成分页、排序、筛选、搜索和导出，输入控件用 asp-for 绑定，实时图表通过 hub.BroadcastChartAsync 经 sgcHTML WebSocket 推送，无需 SignalR。包含在 esegece.sgcHTML.AspNetCore NuGet 包中，Community 版同样可用。 | 概览 |
| 从右到左布局 | 阿拉伯语、希伯来语、波斯语、乌尔都语及其他从右到左的语言会以 dir="rtl" 和 Bootstrap 的 RTL 样式表渲染，组件随之镜像：站点侧边栏和图标栏、步骤条、时间线、聊天、在线状态、树视图、滑块、分隔条、网格的列宽调整和冻结列、通知、头像以及看板。图表、仪表、仪器和甘特图的时间轴保持原有几何形态。方向会自动跟随语言，Dir 和 HtmlDir 可以覆盖它，从左到右的页面不受影响。 | Docs |
| Testing | 确定性的元素 id、带 CSS 选择器的小型 DOM、HTML 断言、快照文件，以及无需服务器的请求测试，不需要任何测试框架。 | Docs |
本页列出的每一项能力，都在其中某个应用里得到实际运用。
在线演示：AI Data Pack、购物助手、MCP 应用、仪表、SCADA / IoT和 从右到左 (RTL)。