Angular バッジライブラリ | ng-hub-ui-badges
ステータス・カウンター・削除可能なフィルタータグ向けのセマンティックな Angular バッジ。CSS 変数と公開 SCSS mixin でカスタムカラーファミリーにも対応。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
セマンティックマトリクス
Semantic coloursPrimary Secondary Success Danger Warning Info
Visual variantsSolid Soft Outline Ghost Subtle Surface
サイズと形状
SizesXS SM MD LG
ShapesPill Rounded Square
ステータスとカウンター
Status dots
API gatewayOnline
Review queuePending review
Billing exportsBlocked
Counters 12 5 alerts 42 deployments
削除可能なフィルター
3 active filters Priority: High Assigned: Me Status: Open
オープンなセマンティックテーマ設定
省略とツールチップ
Narrow column — long labels truncate; hover a badge for the full text.Processing invoice export Completed with warnings Completed Waiting for manual approval Explicit tooltip overrides the label, even when it fits:Synced Cap the width per badge with --hub-badge-max-width:A very long capped label
インタラクティブなフィルターチップ
Status (single select) Open Pending Closed
Labels (multiple select) bug feature docs urgent
チップの色
Semantic coloursprimary secondary success danger warning info neutral light dark
Standalone toggle (two-way Notifications Removable Disabled notifications: true
selected)