库中的每个组件，分为九个系列。每一个都渲染为 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 仪表盘，带有低 / 中 / 高颜色阈值。 | 文杠 |
| 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 | 双滑块，用于选择一对低/高值，带有实时数值徽章。 | 文档 |
用于布局页面的卡片、媒体和 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 进度条，支持条纹和动画效果，可为单段或堆叠式多段。 | 文杠 |
会话式 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 | 管理员模拟横幅，在以其他用户身份操作时显示，带有一键退出。 | 文档 |
提供页面服务并保持其实时性的非可视化部件。
| 组件 | 类 | 说明 | 帮助 |
|---|---|---|---|
| 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 |