Standalone アプリ向け Angular コンポーネントライブラリ
standalone アプリ、Angular Signals のワークフロー、アクセシビリティ、CSS 変数に対応した再利用可能な Angular UI コンポーネント。モーダル、データテーブル、ナビゲーション、カレンダーなどを網羅した本番運用に耐えるドキュメント付き。
npm install ng-hub-ui-modal<hub-panels /><hub-avatar /><hub-skeleton />--hub-sys-color-primarynpm i ng-hub-ui-*1 つのライブラリで、あらゆるブランドに
すべてのコンポーネントは CSS 変数で駆動します。テーマを選ぶと、サイト全体が再描画される様子を確認できます。リビルドも追加の CSS も不要です。
試してみてください — これでサイト全体のテーマがリアルタイムに切り替わります。
本番の Angular 開発のために作られた
うまく実装するのに最も時間がかかりがちなコンポーネントカテゴリから始めましょう。
モーダルとオーバーレイのフロー
アクセシブルなモーダル動作を必要とする Angular アプリ向けの、ダイアログ、フルスクリーンフロー、プロジェクション、サービス駆動のオーバーレイ。
データテーブルとリスト
管理パネル、バックオフィス、マネジメントダッシュボード向けのサーバーサイドページネーション、ソート、フィルタリング、選択機能。
ソートとドラッグ＆ドロップ
Angular に適したドラッグ＆ドロップユーティリティで、配列、FormArray コントロール、連結リストを並べ替えられます。
スケジューリングとカレンダービュー
イベント、テンプレート、ドラッグ＆ドロップ、テーマフックを備えた、計画ワークフロー向けのカレンダーインターフェース。
なぜ Hub UI なのか？
完全なアクセシビリティ
すべてのコンポーネントは WCAG 2.1 ガイドラインに準拠し、完全なキーボード操作とスクリーンリーダーに対応しています。
CSS 変数で駆動
すべてのコンポーネントが CSS カスタムプロパティを公開しています。トークンを上書きするだけでブランドに合わせられ、変更はすべてのテーマに即座に反映されます。
TypeScript ファースト
全体を通して厳格な型付け。完全な自動補完、コンパイル時の安全性、最高クラスの開発体験を享受できます。
Standalone アーキテクチャ
Angular のモダンな standalone コンポーネントモデルの上に構築。必要なものだけをインポートして、バンドルを軽量に保てます。
本物のコード、本物のコンポーネント
テンプレート数行で十分です。左側のスニペットが、右側のライブコンポーネントを描画します。
すべてのコンポーネント
実際のプロダクトチーム、再利用可能なデザインシステム、保守しやすい standalone アプリケーションのために作られた Angular コンポーネントをご覧ください。
Modal
スタッキング、フルスクリーンモード、テンプレートに対応したアクセシブルな Angular モーダルコンポーネント。
Paginable
フィルタリング、ソート、サーバーサイド処理に対応した Angular データテーブルとページネーション付きリスト。
Sortable
配列、FormArray コントロール、ドラッグ＆ドロップビルダー向けの Angular ソート可能リストユーティリティ。
Calendar
スケジュール、イベント、計画用インターフェース向けの Angular カレンダーコンポーネント。
Avatar
イニシャル、画像フォールバック、ステータス表示に対応した Angular アバターコンポーネント。
Board
ワークフロー UI 向けのドラッグ＆ドロップ対応 Angular かんばんボードコンポーネント。
Breadcrumbs
ルーター連携とカスタムテンプレートに対応した Angular パンくずリスト。
History
エディター、フォーム、ローコードビルダー向けの Angular の元に戻す／やり直しストア。
Nav
サイドバー、ドロップダウン、ドリルダウンパネル、レスポンシブレイアウト向けの Angular ナビゲーションメニュー。
Portal
ドロワー、フローティングパネル、動的コンテナ向けの Angular ポータルとオーバーレイ描画。
Skeleton
プリセット、インライン DSL テンプレート、レスポンシブなシマーレイアウトに対応した Angular スケルトンプレースホルダー。
Spreadsheet
Stepper
ウィザードフォーム、オンボーディング、複数ステップの検証フロー向けの Angular ステッパーコンポーネント。
Toast
位置指定・スタック・自動クローズに対応した Angular のトースト／通知コンポーネント。
Buttons
アクション豊富な UI 向けの Angular ボタン・FAB・スピードダイヤル・ドロップダウンディレクティブ。
Badges
ラベル・カウント・ステータス表示向けの、フルテーマ対応 Angular バッジコンポーネント。
Panels
単一／複数展開とフルテーマに対応した Angular のパネル／アコーディオンコンポーネント。
Forms
高機能な入力・セレクト・バリデーション・動的レンダリングを備えた Angular フォームライブラリ。
Milestones
縦・横・アニメーション表示に対応した Angular のタイムライン／進捗ステップコンポーネント。
Icons
Font Awesome、Bootstrap、Material、カスタム SVG パックに対応したセット非依存の Angular アイコンコンポーネント。
Metrics
完全な ARIA セマンティクスとトークンテーマ対応の Angular プログレス・メーター・ゲージコンポーネント。
Utils
オーバーレイ、フォーカス管理、パイプ、翻訳ヘルパーを備えた Angular ユーティリティライブラリ。
Action Sheet
サービスから開く Angular のアクションシート。ロール、グループ化されたアクション、ドラッグでの終了に対応します。
Design System
すべての Hub UI ライブラリが共有するデザイントークン、8 つのテーマ、ユーティリティクラス、Sass ミックスイン。
Loading
inline・overlay・fullscreen の 3 モードで表示する Angular のローディング表示と、ページ進捗バー。
Signature
筆跡をスケーラブルな SVG として保存する Angular の署名フィールド。取り消し、やり直し、PNG エクスポートに対応します。
数秒で始められる
コンポーネントをインストール
npm install ng-hub-ui-modalstandalone でインポート
import { HubModal } from 'ng-hub-ui-modal';CSS 変数でカスタマイズ
--hub-modal-border-radius: 1rem;