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

データ & テーブル

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

コンポーネント	クラス	説明	ヘルプ
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

チャート & 可視化

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

コンポーネント	クラス	説明	ヘルプ
Chart	`TsgcHTMLComponent_Chart`	Chart.js チャート。折れ線、棒、円、ドーナツ、レーダー、極座標、バブル、散布図に対応。	Docs
Gauge	`TsgcHTMLComponent_Gauge`	低 / 中 / 高のカラーしきい値を備えた半円形 SVG ゲージ。	Docs
Diagram	`TsgcHTMLComponent_Diagram`	インライン SVG としてレンダリングされる、ノードと矢印のフロー図。	Docs
Map	`TsgcHTMLComponent_Map`	マーカー付きの Leaflet.js インタラクティブマップ（OpenStreetMap / CartoDB タイル）。	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

コンテンツ & レイアウト

ページをレイアウトするためのカード、メディア、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

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

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

コンポーネント	クラス	説明	ヘルプ
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

チャット & AI

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

コンポーネント	クラス	説明	ヘルプ
ChatBox	`TsgcHTMLComponent_ChatBox`	入力バーと入力中インジケーターを備えた、カードスタイルのチャット吹き出しボックス。	Docs
Chat	`TsgcHTMLComponent_Chat`	テキスト / 画像 / ファイル / 音声 / 動画メッセージ、既読確認、返信に対応した WhatsApp スタイルのチャット。	Docs
AIChat	`TsgcHTMLComponent_AIChat`	プロバイダー / モデル選択、トークンストリーミング、RAG ソース引用を備えた AI アシスタントチャット。	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

インフラストラクチャ

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

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

コンポーネント	クラス	説明	ヘルプ
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

ナビゲーション & 構造