Badge (バッジ)

    Badge コンポーネントを使用して他のインターフェイス要素や通知を表示するために注意を促します。コンポーネントに対するインタラクションに応じてユーザーに追加情報を公開することにより UX を向上できます。Badge は、Ignite UI for Angular Badge コンポーネントと視覚的に同じものです。

    Badge のデモ

    タイプ

    Badge は、数字やアイコンなど、さまざまなタイプのコンテンツを使用できます。さらに、ドット タイプのバッジ バリアントも使用可能です。ドット タイプのバッジは、ユーザー インターフェイスにおいて注意を引いたり、状態や通知を示したりするために一般的に使用されます。

    サイズ

    Badge のサイズは 3 つあります。

    • Large (大)
    • Medium (中)
    • Small (小)

    形状

    Badge コンポーネントには、rounded と square の 2 つの形状があります。

    アウトライン バリエーション

    アウトライン バリエーションは、すべてのバッジ タイプとシェイプで使用でき、プロパティ パネルの Outlined ブール値プロパティを使用して有効にできます。

    状態

    Badge は、以下のプリセット カラーの組み合わせのいずれかで使用することで、注意を引くことができます: Primary、Info、Success、Warn および Error です。

    スタイル設定

    Badge は高いスタイリング柔軟性を備えており、背景、アイコンとその色、テキスト、テキストの色やスタイルなどをカスタマイズできます。すべてのバッジ タイプと形状がアウトライン バリアントにも対応しているため、境界線の色を調整して外観をさらに作り込むことができます。

    使用方法

    Badge を使用して Avatar やテキスト タイトルなどのその他の UI 部分に印を付けます。Badge をそれ自体には使用しないでください。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。