Angular バッジライブラリ | ng-hub-ui-badges

インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

セマンティックマトリクス

バッジの中核となる表現。solid、soft、outline、ghost、subtle、surface の各バリアントでセマンティックカラーを提供します。

サイズと形状

コンパクトな XS タグ、ゆとりのある LG ピル、3 種類のシェル形状で、密度の高いテーブルにも余裕のあるダッシュボードにも対応します。

ステータスとカウンター

ステータスドット、アラート件数、アイコンバッジ、軽量なメタデータピルを同じプリミティブから作成できます。

削除可能なフィルター

アクティブなフィルター、スコープ付き検索ピル、軽量なトークン UI のための削除可能なタグ。

オープンなセマンティックテーマ設定

組み込みの色は共有デザインシステムトークンを参照し、カスタムアクセントは公開 SCSS ミックスインを通じて組み込めます。

省略とツールチップ

長いラベルは省略記号で切り詰められ、ホバーで全文を表示します（ネイティブの title、または接続時は hub-ui ツールチップ）。

フィルターチップ

単一または複数選択のために hub-chip-set によって連携される、トグル可能な hub-chip タグ。バッジのアクセントテーマを再利用します。

チップの色

チップ上の 9 つの組み込みアクセントに加え、単独の双方向トグル、削除可能なタグ、無効化されたチップ — いずれも chip-set の外側で。