93 種類の sgcHTML UI コンポーネントを、9 つのファミリーに分けて 1 か所でまとめて閲覧できます。すべてのコンポーネントは Bootstrap 5 マークアップとしてレンダリングされ、Delphi、C++ Builder、.NET で同じように動作し、いずれも同じ Tsgc* クラス名を使用します。93 種類のうち 28 種類はデータアウェアで、TDataSet / DataSource（または .NET の同等のソース）に直接バインドします。これらには データアウェア バッジが付いています。任意のカードをクリックするとコンポーネントページが開き、ドキュメントも参照できます。
以下のすべてのコンポーネントは、実行可能なサンプルとして提供されます。60.HTML デモセットに含まれる 08.Components プロジェクトは、このカタログ全体を、ブラウザ上で操作できるライブでクリック可能なギャラリーとしてレンダリングします。無料体験版に含まれているため、ギャラリー全体をローカルで、ご自身のデータに対して実行できます。
体験版には 60.HTML デモプロジェクト（08.Components を含む）が含まれます。インタラクティブギャラリーの常時稼働のホスト版は、別途デプロイされます。
目的のファミリーへ直接ジャンプするか、下のカタログ全体をスクロールしてご覧ください。
14 コンポーネント
11 コンポーネント
10 コンポーネント
23 コンポーネント
10 コンポーネント
14 コンポーネント
4 コンポーネント
7 コンポーネント
7 クラス
データセットを直接レンダリングするグリッド、カレンダー、ボード。
TsgcHTMLComponent_GridTsgcHTMLComponent_Grid多機能なテーブル。ソート、フィルター、CSV/PDF エクスポート、インライン編集、グループ化、仮想スクロール、AI クエリに対応。
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableGrid と Pagination をラップし、ツールバー、検索、行数表示を備えた高レベルのデータテーブル。
TsgcHTMLComponent_CalendarTsgcHTMLComponent_Calendarイベントドットと前後ナビゲーションを備えた月グリッドカレンダー。
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_Scheduler日付ごとにイベントを表示するカレンダースケジューラー（月 / 週表示）。
TsgcHTMLComponent_TimelineTsgcHTMLComponent_Timelineデータセットから読み込める、日付付きイベントの縦型タイムライン。
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoard列とドラッグ可能なカードで構成されるカンバンボード。
TsgcHTMLComponent_GanttTsgcHTMLComponent_Ganttタスクの進捗バーを備えたガントチャート（プロジェクトタイムライン）。
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridId/ParentId のノードペアから構築される、折りたたみ可能な階層行を備えた Bootstrap テーブル。
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTable行と列をグループ化し、行・列・総計とともに集計値を算出する Bootstrap ピボットテーブル。
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeed相対タイムスタンプとアウトオブバンドの WebSocket プッシュを備えた、新着順のライブアクティビティフィード。
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrailアクター、アクション、対象、タイムスタンプを記録した、ユーザーおよびシステム操作の時系列監査ログフィード。
ご自身の数値から構築される、データ駆動のビジュアル。
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartChart.js チャート。折れ線、棒、円、ドーナツ、レーダー、極座標、バブル、散布図。
TsgcHTMLComponent_GaugeTsgcHTMLComponent_Gauge低 / 中 / 高のカラーしきい値を備えた半円形の SVG ゲージ。
TsgcHTMLComponent_DiagramTsgcHTMLComponent_Diagramインライン SVG としてレンダリングされる、ノードと矢印のフロー図。
TsgcHTMLComponent_MapTsgcHTMLComponent_Mapマーカー付きの Leaflet.js インタラクティブマップ（OpenStreetMap / CartoDB タイル）。
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_Heatmapセル値またはバインドしたデータセットから生成する、凡例と行/列ラベル付きのカラースケール SVG ヒートマップグリッド。
TsgcHTMLComponent_SparklineTsgcHTMLComponent_Sparkline値系列またはバインドしたデータセットから生成する、コンパクトなインライン SVG のスパークライン（折れ線・棒・エリア）。
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartヒゲ、上昇/下降の色分け、任意の出来高ストリップを備えた SVG の OHLC ローソク足チャート。
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCode任意のテキストや URL から生成する、誤り訂正レベルを選択可能な純 Pascal 実装の ISO/IEC 18004 SVG QR コード。
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_Barcode任意の ASCII テキストから生成する、人が読めるキャプションを任意で付けられる純 Pascal 実装の Code 128 SVG バーコード。
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapチャートライブラリ不要で、サーバー生成の自己完結型インライン SVG としてレンダリングされる squarified ツリーマップ。
バリデーションとデータセットバインドを備えた、データ入力に必要なすべて。
TsgcHTMLComponent_FormTsgcHTMLComponent_Formバリデーション、レイアウト、AI フォーム生成に対応した、データ駆動のフォームビルダー。
TsgcHTMLComponent_EditTsgcHTMLComponent_Editラベル、ヘルプテキスト、データセットバインドを備えた 1 行テキスト入力。
TsgcHTMLComponent_MemoTsgcHTMLComponent_Memoラベルとヘルプテキストを備えた複数行のテキストエリア入力。
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxラベルとチェック状態を備えたチェックボックス入力。
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroup相互排他的なラジオオプションのグループ。
TsgcHTMLComponent_SelectTsgcHTMLComponent_Selectオプショングループ、複数選択、データセットバインドに対応したセレクトドロップダウン。
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroup前後にアドオンテキストを付けられる入力欄。
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoComplete候補の HTML5 datalist を備えたテキスト入力。
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerネイティブな日付 / 時刻 / 日時の入力フィールド。
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadマルチパートフォーム送信に対応した、ドラッグ＆ドロップのファイルアップロードゾーン。
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditor隠しフォームフィールドを備えた、Quill ベースの WYSIWYG リッチテキストエディター。
TsgcHTMLComponent_RatingTsgcHTMLComponent_Rating星（記号）による評価の表示または入力。
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectチップ、グループ化オプション、データセットバインドを備えた、検索可能な Bootstrap マルチセレクトドロップダウン。
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPicker任意の 16 進テキストフィールドとスウォッチプリセットを備えた、ネイティブ HTML5 カラー入力。
TsgcHTMLComponent_SliderTsgcHTMLComponent_Sliderライブの値バッジ、最小/最大ラベル、カラースタイルを備えた Bootstrap レンジスライダー。
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePicker最小/最大範囲と秒単位の精度を備えた、ネイティブ HTML5 の時刻入力。
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadクリア、元に戻す、保存の操作を備えた、ポインターイベント方式のキャンバス署名パッド。
TsgcHTMLComponent_TransferTsgcHTMLComponent_Transferフィルタリングとデータセットバインドを備えた、利用可能パネルと割り当て済みパネルの間で項目を移動するデュアルリストボックスウィジェット。
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerカレンダーと時計を 1 つのフィールドに統合した、ネイティブ HTML5 の日時ピッカー。
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePicker最小/最大範囲を指定して日付範囲を選択する、開始日と終了日の入力ペア。
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderライブの値バッジを備えた、下限/上限の値ペアを選択するデュアルハンドルスライダー。
TsgcHTMLComponent_CameraScannerTsgcHTMLComponent_CameraScannerブラウザーのネイティブ BarcodeDetector でバーコードや QR コードをスキャンするライブカメラパネルで、サードパーティ製ライブラリは不要です。
TsgcHTMLComponent_NumPadTsgcHTMLComponent_NumPadPOS 入力向けのタッチ操作対応の数値・通貨テンキーで、クイック金額ボタンとロケールに依存しない書式を備えています。
ページを構成するためのカード、メディア、KPI タイル。
TsgcHTMLComponent_PanelTsgcHTMLComponent_Panelヘッダー / ボディ / フッターを備え、折りたたみとスクロールに対応した Bootstrap カードパネル。
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardアイコン、トレンド矢印、任意のグラデーションを備えたダッシュボードの KPI / 統計カード。
TsgcHTMLComponent_AccordionTsgcHTMLComponent_Accordion積み重ねた展開可能パネルによる、縦方向に折りたたむアコーディオン。
TsgcHTMLComponent_CarouselTsgcHTMLComponent_Carouselインジケーター、コントロール、自動再生を備えた画像スライドショー / カルーセル。
TsgcHTMLComponent_ImageTsgcHTMLComponent_Image形状、レスポンシブ / 遅延読み込み、ライトボックスリンク、キャプションを備えた画像。
TsgcHTMLComponent_AvatarTsgcHTMLComponent_Avatarサイズ、形状、在席ステータスドットを備えたユーザーアバター（画像またはイニシャル）。
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoHTML5 の動画 / 音声プレーヤーと、YouTube 埋め込みヘルパー。
TsgcHTMLComponent_BadgeTsgcHTMLComponent_Badge色、ピル形状、インラインアイコン、配置指定の通知ドットモードを備えた単一の Bootstrap バッジ。
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewerページナビゲーション、ズーム、検索、ダウンロード、印刷に対応した、pdf.js を基盤とするページ内 PDF ビューアー。
TsgcHTMLComponent_ChipTsgcHTMLComponent_Chip任意のアイコン、色、削除可能なクローズボタンを備えた、コンパクトなチップ / タグ。
ダイアログ、ステータス表示、ローディング状態。
TsgcHTMLComponent_ModalTsgcHTMLComponent_Modalタイトル / ボディ / フッター、サイズ、中央揃え、静的な背景を備えたモーダルダイアログ。
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_Offcanvas左・右・上・下からスライドインするオフキャンバスパネル。
TsgcHTMLComponent_PopoverTsgcHTMLComponent_Popoverトリガー要素上に表示されるポップオーバー（クリック / ホバー / フォーカス）。
TsgcHTMLComponent_ToastTsgcHTMLComponent_Toastヘッダー、ボディ、タイムスタンプ、自動非表示を備えたトースト通知。
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_Snackbar任意のアクションを備えた、マテリアル風の一時的なスナックバー。
TsgcHTMLComponent_NotificationTsgcHTMLComponent_Notification未読バッジを備えた、ベルアイコンのドロップダウン通知センター。
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_Spinnerサイズと色を指定できるローディングスピナー（border / grow）。
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_Placeholderアニメーションするシマーを備えた、スケルトン / プレースホルダーのローディングカード。
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuCSS セレクターにスコープされ、アイコン、区切り、ヘッダー、サーバールーティングのアクションを備えた右クリックドロップダウンメニュー。
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgressステータスバッジ、キャンセルボタン、アウトオブバンドのフラグメント更新を備えた、バックグラウンドジョブの進捗バーのライブリスト。
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerレベルフィルター、検索、自動スクロールを備えたストリーミングログ / ターミナルビューアー。
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarストライプとアニメーションに対応した、単一または積み重ね複数セグメントの Bootstrap プログレスバー。
TsgcHTMLComponent_CommandPaletteTsgcHTMLComponent_CommandPalette部分一致からあいまい検索へと進むフィルタリング、カテゴリー分け、サーバーへルーティングされるアクションを備えた Ctrl+K / Cmd+K のクイックアクションランチャー。
TsgcHTMLComponent_EmptyStateTsgcHTMLComponent_EmptyStateグリッド、リスト、検索結果に行が 1 件もないときに表示するパネル。アイコン、タイトル、説明文、最大 2 個のボタンを備えます。
シンプルな吹き出しから、ストリーミング対応の AI アシスタントまでの会話型 UI。
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBox入力バーと入力中インジケーターを備えた、カード形式のチャット吹き出しボックス。
TsgcHTMLComponent_ChatTsgcHTMLComponent_Chatテキスト / 画像 / ファイル / 音声 / 動画メッセージ、既読通知、返信に対応した WhatsApp 風チャット。
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatプロバイダー / モデルセレクター、トークンストリーミング、RAG のソース引用を備えた AI アシスタントチャット。
TsgcHTMLComponent_PresenceTsgcHTMLComponent_Presenceライブのステータス更新を備えた、アバタースタックまたはリスト形式のオンラインユーザー一覧。
パスワードからパスキーまで、既製のサインインフロー。
TsgcHTMLComponent_LoginTsgcHTMLComponent_Loginログイン状態の保持とアラートを備えた、既製のログインフォーム / ページ（カード、中央揃え、または全画面）。
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginOAuth のソーシャルログインボタンパネル（Google、Facebook、Apple、GitHub、Microsoft など）。
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallback自動リダイレクトを備えた、成功・エラー・ローディング状態の OAuth コールバック / ランディングページ。
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginパスワードレスのパスキー / WebAuthn ログイン・登録ウィジェット。
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsセルごとのチェックボックスと、WebSocket によるライブな権限更新を備えたロール / 権限マトリックス。
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementロール、ステータス、検索、行ごとのアクションドロップダウンを備えたユーザー管理テーブル。
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBanner別のユーザーとして操作している間に表示される、ワンクリックで終了できる管理者のなりすましバナー。
ページを配信し、ライブな状態を保つ非表示のパーツ。
TsgcHTMLEngine_ServerTsgcHTMLEngine_Serverレンダリング済みページと埋め込みアセットを配信する、TsgcWebSocketHTTPServer にバインドされた HTML エンジン。
TsgcHTMX_Engine_ServerTsgcHTMX_Engine_Server同じサーバーに接続される htmx エンジン。HTTP と WebSocket のハンドラーにフックし、受信したリクエストやメッセージをディスパッチし、接続中のブラウザへ HTML フラグメントをリアルタイムにプッシュまたはブロードキャストします。
TsgcHTMLPageBuilderTsgcHTMLPageBuilder登録されたコンポーネントを、完全なレスポンシブページへと組み立てます。設計時のビジュアルエディターも備えています。
TsgcHTMLThemeControllerTsgcHTMLThemeControllerTheme プロパティ（ptDefault、ptDark、ptDarkPro）で選択したテーマと共有スタイルシートをページに適用する、実行時のテーマスイッチャー。
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderMode（tmLight、tmDark、tmSystem）に応じて、プロパティ値から Bootstrap の CSS 変数を出力する CSS ジェネレーター。tmSystem 用に OS 設定と同期するスクリプトも任意で利用できます。
TsgcHTMX_FragmentTsgcHTMX_Fragmentサーバーからブラウザへページの部分更新をプッシュするための、アウトオブバンドの htmx フラグメント。
TsgcHTMX_RouterTsgcHTMX_Router受信したリクエストパスを照合し、（HandleRequest を介して）そのルートの OnRoute ハンドラーへディスパッチする Routes のルーティングテーブル。
このページのコンポーネントはモックアップではありません。いずれも、これらの Delphi アプリケーションの中で今まさに動作しています。
