sgcHTML 機能マトリックス

コンポーネント	クラス	説明	ヘルプ
NavBar	`TsgcHTMLComponent_NavBar`	ブランドと折りたたみ可能なメニュー項目を備えた、レスポンシブなトップナビゲーションバー。	Docs
Sidebar	`TsgcHTMLComponent_Sidebar`	アイコン、ヘッダー、区切り線、フッターを備えた縦型のサイドナビゲーション。	Docs
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	階層内の現在位置を示すパンくずリスト。	Docs
Tabs	`TsgcHTMLComponent_Tabs`	切り替え可能なコンテンツペインを備えた、タブ・ピル・アンダーラインのタブセット。	Docs
Pagination	`TsgcHTMLComponent_Pagination`	項目数やページ数から生成するページナビゲーションコントロール。	Docs
Toolbar	`TsgcHTMLComponent_Toolbar`	区切りやツールチップを使ってボタンをグループ化するボタンツールバー。	Docs
TreeView	`TsgcHTMLComponent_TreeView`	折りたたみ可能な階層ツリー。データセットから読み込めます。	Docs
Stepper	`TsgcHTMLComponent_Stepper`	水平または垂直のウィザード / ステップ進捗インジケーター。	Docs
Dropdown	`TsgcHTMLComponent_Dropdown`	リンク、ヘッダー、区切り線からなるメニューを備えたドロップダウンボタン。	Docs
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	水平または垂直に並ぶセグメント化されたボタンセット。	Docs
ListGroup	`TsgcHTMLComponent_ListGroup`	バッジや追加コンテンツを備えた、リンクや項目のリストグループ。	Docs
DashboardLayout	`TsgcHTMLDashboardLayout`	固定サイドバーとコンテンツセクションを備えた完全なダッシュボードシェル。	Docs
Site	`TsgcHTMLComponent_Site`	ヘッダー、ナビゲーションメニュー、コンテンツ、フッターを備えた完全なページシェル。差し替え可能なレイアウトテンプレートを使用します。	Docs
Splitter	`TsgcHTMLComponent_Splitter`	ドラッグ可能なガターと、任意で保存できる位置を備えた、水平または垂直の2つのリサイズ可能なペイン。	Docs

データ & テーブル

データセットを直接レンダリングするグリッド、カレンダー、ボード。

コンポーネント	クラス	説明	ヘルプ
Grid	`TsgcHTMLComponent_Grid`	多機能なテーブル。並べ替え、フィルター、CSV/PDF エクスポート、インライン編集、グループ化、仮想スクロール、AI クエリに対応。	Docs
DataTable	`TsgcHTMLComponent_DataTable`	Grid + Pagination をラップした高レベルのデータテーブル。ツールバー、検索、行数表示を備えます。	Docs
Calendar	`TsgcHTMLComponent_Calendar`	イベントドットと前後ナビゲーションを備えた月グリッドカレンダー。	Docs
Scheduler	`TsgcHTMLComponent_Scheduler`	日付ごとにイベントを表示するカレンダースケジューラー（月 / 週ビュー）。	Docs
Timeline	`TsgcHTMLComponent_Timeline`	日付付きイベントの縦型タイムライン。データセットから読み込めます。	Docs
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	列とドラッグ可能なカードからなるカンバンボード。	Docs
Gantt	`TsgcHTMLComponent_Gantt`	タスクの進捗バーを備えたガントチャート形式のプロジェクトタイムライン。	Docs
TreeGrid	`TsgcHTMLComponent_TreeGrid`	Id/ParentId のノードペアから構築される、折りたたみ可能な階層行を持つ Bootstrap テーブル。	Docs
PivotTable	`TsgcHTMLComponent_PivotTable`	行と列をグループ化し、行・列・総計で測定値を集計する Bootstrap ピボットテーブル。	Docs
ActivityFeed	`TsgcHTMLComponent_ActivityFeed`	相対タイムスタンプとアウトオブバンドの WebSocket プッシュを備えた、新着順のライブアクティビティフィード。	Docs
AuditTrail	`TsgcHTMLComponent_AuditTrail`	アクター、アクション、対象、タイムスタンプを記録した、ユーザーおよびシステム操作の時系列監査ログフィード。	Docs

チャート & 可視化

あなた自身の数値から構築するデータ駆動のビジュアル。

コンポーネント	クラス	説明	ヘルプ
Chart	`TsgcHTMLComponent_Chart`	Chart.js チャート。折れ線、棒、円、ドーナツ、レーダー、極座標、バブル、散布図に対応。	Docs
Gauge	`TsgcHTMLComponent_Gauge`	低 / 中 / 高のカラーしきい値を備えた半円形 SVG ゲージ。	Docs
Diagram	`TsgcHTMLComponent_Diagram`	インライン SVG としてレンダリングされる、ノードと矢印のフロー図。	Docs
Map	`TsgcHTMLComponent_Map`	マーカー付きの Leaflet.js インタラクティブマップ（OpenStreetMap / CartoDB タイル）。	Docs
Heatmap	`TsgcHTMLComponent_Heatmap`	セルの値またはバインドされたデータセットから生成する、色スケールの SVG ヒートマップグリッド。凡例と行 / 列ラベルを備えます。	Docs
Sparkline	`TsgcHTMLComponent_Sparkline`	値の系列またはバインドされたデータセットから生成する、コンパクトなインライン SVG スパークライン（折れ線、棒、エリア）。	Docs
CandlestickChart	`TsgcHTMLComponent_CandlestickChart`	ヒゲ、上昇 / 下降のカラー、任意の出来高バーを備えた SVG OHLC ローソク足チャート。	Docs
QRCode	`TsgcHTMLComponent_QRCode`	任意のテキストまたは URL から生成する、Pure-Pascal 実装の ISO/IEC 18004 準拠 SVG QR コード。誤り訂正レベルを選択できます。	Docs
Barcode	`TsgcHTMLComponent_Barcode`	任意の ASCII テキストから生成する、Pure-Pascal 実装の Code 128 SVG バーコード。任意で人が読めるキャプションを付加できます。	Docs
TreeMap	`TsgcHTMLComponent_TreeMap`	サーバーで生成される自己完結型のインライン SVG としてレンダリングされる、スクエアリファイド・ツリーマップ。チャートライブラリは不要です。	Docs

フォーム & 入力

データ入力に必要なすべて。バリデーションとデータセットバインドを備えています。

コンポーネント	クラス	説明	ヘルプ
Form	`TsgcHTMLComponent_Form`	バリデーション、レイアウト、AI フォーム生成に対応した、データ駆動のフォームビルダー。	Docs
Edit	`TsgcHTMLComponent_Edit`	ラベル、ヘルプテキスト、データセットバインドを備えた単一行テキスト入力。	Docs
Memo	`TsgcHTMLComponent_Memo`	ラベルとヘルプテキストを備えた複数行のテキストエリア入力。	Docs
CheckBox	`TsgcHTMLComponent_CheckBox`	ラベルとチェック状態を備えたチェックボックス入力。	Docs
RadioGroup	`TsgcHTMLComponent_RadioGroup`	相互排他的なラジオオプションのグループ。	Docs
Select	`TsgcHTMLComponent_Select`	オプショングループ、複数選択、データセットバインドを備えたセレクトドロップダウン。	Docs
InputGroup	`TsgcHTMLComponent_InputGroup`	前後にアドオンテキストを付けられる入力。	Docs
AutoComplete	`TsgcHTMLComponent_AutoComplete`	HTML5 の datalist による候補を備えたテキスト入力。	Docs
DatePicker	`TsgcHTMLComponent_DatePicker`	ネイティブな日付 / 時刻 / 日時の入力フィールド。	Docs
FileUpload	`TsgcHTMLComponent_FileUpload`	マルチパートフォーム送信に対応した、ドラッグ＆ドロップのファイルアップロードゾーン。	Docs
RichEditor	`TsgcHTMLComponent_RichEditor`	隠しフォームフィールドを備えた、Quill ベースの WYSIWYG リッチテキストエディター。	Docs
Rating	`TsgcHTMLComponent_Rating`	星（記号）による評価の表示または入力。	Docs
MultiSelect	`TsgcHTMLComponent_MultiSelect`	チップ、グループ化されたオプション、データセットバインドを備えた、検索可能な Bootstrap マルチセレクトドロップダウン。	Docs
ColorPicker	`TsgcHTMLComponent_ColorPicker`	任意の16進数テキストフィールドとスウォッチのプリセットを備えた、ネイティブな HTML5 カラー入力。	Docs
Slider	`TsgcHTMLComponent_Slider`	ライブの値バッジ、最小 / 最大ラベル、カラースタイルを備えた Bootstrap レンジスライダー。	Docs
TimePicker	`TsgcHTMLComponent_TimePicker`	最小 / 最大の範囲と秒単位の粒度を備えた、ネイティブな HTML5 時刻入力。	Docs
SignaturePad	`TsgcHTMLComponent_SignaturePad`	Clear、Undo、Save の各アクションを備えた、ポインターイベント方式の canvas 署名パッド。	Docs
Transfer	`TsgcHTMLComponent_Transfer`	フィルタリングとデータセットバインドを備えた、利用可能パネルと割り当て済みパネルの間で項目を移動するデュアルリストボックスウィジェット。	Docs
DateTimePicker	`TsgcHTMLComponent_DateTimePicker`	カレンダーと時計を 1 つのフィールドに統合した、ネイティブ HTML5 の日時ピッカー。	Docs
DateRangePicker	`TsgcHTMLComponent_DateRangePicker`	最小/最大の範囲を指定して日付範囲を選択する、開始日と終了日の入力ペア。	Docs
RangeSlider	`TsgcHTMLComponent_RangeSlider`	ライブの値バッジを備えた、下限/上限の値ペアを選択するデュアルハンドルスライダー。	Docs

コンテンツ & レイアウト

ページをレイアウトするためのカード、メディア、KPI タイル。

コンポーネント	クラス	説明	ヘルプ
Panel	`TsgcHTMLComponent_Panel`	ヘッダー / ボディ / フッターを備え、折りたたみとスクロールが可能な Bootstrap カードパネル。	Docs
StatCard	`TsgcHTMLComponent_StatCard`	アイコン、トレンド矢印、任意のグラデーションを備えたダッシュボードの KPI / 統計カード。	Docs
Accordion	`TsgcHTMLComponent_Accordion`	展開可能なパネルを縦に積み重ねた、垂直に折りたためるアコーディオン。	Docs
Carousel	`TsgcHTMLComponent_Carousel`	インジケーター、コントロール、自動再生を備えた画像スライドショー / カルーセル。	Docs
Image	`TsgcHTMLComponent_Image`	形状、レスポンシブ / 遅延読み込み、ライトボックスリンク、キャプションを備えた画像。	Docs
Avatar	`TsgcHTMLComponent_Avatar`	サイズ、形状、プレゼンスステータスのドットを備えたユーザーアバター（画像またはイニシャル）。	Docs
Video	`TsgcHTMLComponent_Video`	HTML5 の動画 / 音声プレーヤーと、YouTube 埋め込みヘルパー。	Docs
Badge	`TsgcHTMLComponent_Badge`	カラー、ピル形状、インラインアイコン、位置指定できる通知ドットモードを備えた、単一の Bootstrap バッジ。	Docs
PDFViewer	`TsgcHTMLComponent_PDFViewer`	ページナビゲーション、ズーム、検索、ダウンロード、印刷に対応した、pdf.js を基盤とするページ内 PDF ビューアー。	Docs
Chip	`TsgcHTMLComponent_Chip`	任意のアイコン、色、削除可能なクローズボタンを備えた、コンパクトなチップ / タグ。	Docs

オーバーレイ & フィードバック

ダイアログ、ステータス表示、読み込み状態。

コンポーネント	クラス	説明	ヘルプ
Modal	`TsgcHTMLComponent_Modal`	タイトル / ボディ / フッター、サイズ、中央寄せ、静的バックドロップを備えたモーダルダイアログ。	Docs
Offcanvas	`TsgcHTMLComponent_Offcanvas`	左、右、上、下からスライドインするオフキャンバスパネル。	Docs
Popover	`TsgcHTMLComponent_Popover`	トリガー要素上に表示されるポップオーバーの吹き出し（クリック / ホバー / フォーカス）。	Docs
Toast	`TsgcHTMLComponent_Toast`	ヘッダー、ボディ、タイムスタンプ、自動非表示を備えたトースト通知。	Docs
Snackbar	`TsgcHTMLComponent_Snackbar`	任意のアクションを備えた、マテリアルスタイルの一時的なスナックバー。	Docs
Notification	`TsgcHTMLComponent_Notification`	未読バッジを備えた、ベルアイコンのドロップダウン通知センター。	Docs
Spinner	`TsgcHTMLComponent_Spinner`	サイズと色を指定できる読み込みスピナー（ボーダー / グロー）。	Docs
Placeholder	`TsgcHTMLComponent_Placeholder`	アニメーションするシマー付きのスケルトン / プレースホルダー読み込みカード。	Docs
ContextMenu	`TsgcHTMLComponent_ContextMenu`	アイコン、区切り線、ヘッダー、サーバーへルーティングされるアクションを備えた、CSS セレクターにスコープされた右クリックドロップダウンメニュー。	Docs
JobProgress	`TsgcHTMLComponent_JobProgress`	ステータスバッジ、キャンセルボタン、アウトオブバンドのフラグメント更新を備えた、バックグラウンドジョブの進捗バーのライブリスト。	Docs
LogViewer	`TsgcHTMLComponent_LogViewer`	レベルフィルター、検索、自動スクロールを備えたストリーミング対応のログ / ターミナルビューアー。	Docs
ProgressBar	`TsgcHTMLComponent_ProgressBar`	縞模様とアニメーションに対応した Bootstrap プログレスバー。単一またはスタックされた複数セグメントに対応。	Docs

チャット & AI

シンプルな吹き出しから、ストリーミング対応の AI アシスタントまでの会話 UI。

コンポーネント	クラス	説明	ヘルプ
ChatBox	`TsgcHTMLComponent_ChatBox`	入力バーと入力中インジケーターを備えた、カードスタイルのチャット吹き出しボックス。	Docs
Chat	`TsgcHTMLComponent_Chat`	テキスト / 画像 / ファイル / 音声 / 動画メッセージ、既読確認、返信に対応した WhatsApp スタイルのチャット。	Docs
AIChat	`TsgcHTMLComponent_AIChat`	プロバイダー / モデル選択、トークンストリーミング、RAG ソース引用を備えた AI アシスタントチャット。	Docs
Presence	`TsgcHTMLComponent_Presence`	ライブのステータス更新を備えた、アバタースタックまたはリスト形式の「オンライン中のユーザー」名簿。	Docs

認証

パスワードからパスキーまで、既製のサインインフロー。

コンポーネント	クラス	説明	ヘルプ
Login	`TsgcHTMLComponent_Login`	記憶機能とアラートを備えた既製のログインフォーム / ページ（カード、中央寄せ、または全画面）。	Docs
SocialLogin	`TsgcHTMLComponent_SocialLogin`	OAuth ソーシャルログインボタンのパネル（Google、Facebook、Apple、GitHub、Microsoft など）。	Docs
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	自動リダイレクト付きの、成功 / エラー / 読み込み状態を表す OAuth コールバック / ランディングページ。	Docs
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	パスワード不要のパスキー / WebAuthn ログイン・登録ウィジェット。	Docs
RolesPermissions	`TsgcHTMLComponent_RolesPermissions`	セルごとのチェックボックスと、WebSocket によるライブの権限更新を備えたロール / 権限マトリックス。	Docs
UserManagement	`TsgcHTMLComponent_UserManagement`	ロール、ステータス、検索、行ごとのアクションドロップダウンを備えたユーザー管理テーブル。	Docs
ImpersonateBanner	`TsgcHTMLComponent_ImpersonateBanner`	別のユーザーとして操作している間に表示される、ワンクリックで終了できる管理者のなりすましバナー。	Docs

インフラストラクチャ

エンジン、サーバー & テーマ

ページを配信し、ライブな状態を保つ非ビジュアルな要素。

コンポーネント	クラス	説明	ヘルプ
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`	`Mode`（`tmLight`、`tmDark`、`tmSystem`）に応じて、プロパティ値から Bootstrap の CSS 変数を出力する CSS ジェネレーター。`tmSystem` では OS の設定に同期する任意のスクリプトも利用できます。	Docs
HTMXFragment	`TsgcHTMX_Fragment`	サーバーからブラウザへ部分ページ更新をプッシュするための、アウトオブバンド htmx フラグメント。	Docs
HTMXRouter	`TsgcHTMX_Router`	受信したリクエストのパスに一致させ、`HandleRequest` を介してそのルートの `OnRoute` ハンドラーへ振り分ける、`Routes` のルーティングテーブル。	Docs

ナビゲーション & 構造