Angular カンバンボードコンポーネント | ng-hub-ui-board
ドラッグ＆ドロップ、カスタムカードテンプレート、カラムワークフロー、CSS 変数を備えた Angular の Kanban ボードコンポーネント。業務ダッシュボード向けです。
概要
チームがこのライブラリを探す理由
この Angular ボードコンポーネントは、実際の業務ツール向けに、ドラッグ＆ドロップ、柔軟なテンプレート、拡張可能な操作パターンを備えた Kanban スタイルのワークフローを提供します。
インストール
npm install ng-hub-ui-boardジャンプ
最適な用途
- タスクボード
- パイプライン追跡
- CRM ワークフロー
- オペレーションダッシュボード
について board
ng-hub-ui-board は、静的なリスト以上のものを必要とする Angular プロダクト向けに設計されています。タスク管理、CRM パイプライン、サポートワークフロー、社内オペレーションダッシュボードなどです。一貫したボード操作モデルを保ちながら、カードのレンダリングを柔軟に保てます。
機能ガイド
基本的な使い方
board の基本機能
サンプル:
基本的なボードの例
基本的なボードの例
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
インタラクション
ユーザーインタラクション機能
サンプル:
カードのドラッグ & ドロップ
カードのドラッグ & ドロップ
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Event: None
列の並べ替え
列の並べ替え
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
カードクリックイベント
カードクリックイベント
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
ボードイベント
ボードイベント
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
高度な機能
スクロールと高度な動作
サンプル:
無限スクロール
無限スクロール
To Do
Research
Analyze requirements
Design
Create UI mockups
Scroll Item 1
Scroll to see more
Scroll Item 2
Scroll to see more
Scroll Item 3
Scroll to see more
Scroll Item 4
Scroll to see more
Scroll Item 5
Scroll to see more
Scroll Item 6
Scroll to see more
Scroll Item 7
Scroll to see more
Scroll Item 8
Scroll to see more
Scroll Item 9
Scroll to see more
Scroll Item 10
Scroll to see more
Scroll Item 11
Scroll to see more
Scroll Item 12
Scroll to see more
Scroll Item 13
Scroll to see more
Scroll Item 14
Scroll to see more
Scroll Item 15
Scroll to see more
Scroll Item 16
Scroll to see more
Scroll Item 17
Scroll to see more
Scroll Item 18
Scroll to see more
Scroll Item 19
Scroll to see more
Scroll Item 20
Scroll to see more
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Scroll End: None
テンプレート
外観のカスタマイズ
サンプル:
カスタムカードテンプレート
カスタムカードテンプレート
To Do
In Progress
Done
カスタムヘッダーテンプレート
カスタムヘッダーテンプレート
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
カスタムフッターテンプレート
カスタムフッターテンプレート
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
カスタムカードプレースホルダー
カスタムカードプレースホルダー
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
カスタム列プレースホルダー
カスタム列プレースホルダー
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
カスタムドラッグプレビュー
カスタムドラッグプレビュー
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
設定
board の設定オプション
サンプル:
並べ替えを無効化
並べ替えを無効化
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
カスタムスクロールパディング
カスタムスクロールパディング
Scroll detection padding is handled internally (default 1px). To inspect it, you would typically look at source code, but implementation details like specific padding override are not exposed as inputs in the current version of HubBoardComponent. This example shows a board that *could* use it if the API exposed it, or demonstrates the standard behavior. (Note: The library source code defines `scrollDetectionPadding = 1` as private readonly, so it cannot be customized via input currently.)
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
ドラッグ動作モード
ドラッグ動作モード
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Current Behavior: collapse
- Collapse: The element completely disappears and its space is removed from the layout
- Best for: Clean interface where you only want to see the placeholder at the destination
スタイリング
CSS 変数による外観のカスタマイズ
サンプル:
CSS カスタマイズ
CSS カスタマイズ
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
主な機能
最近の変更
利用可能な変更履歴のエントリはありません。