ion-badge
バッジは、通常別の要素の近くに表示されるインラインブロック要素です。通常、数字やその他の文字が含まれます。これらは、要素に関連付けられた追加のアイテムがあることを通知し、アイテムの数を示すために使用できます。コンテンツが渡されない場合、バッジは非表示になります。
基本的な使い方
テーマ
色
CSSプロパティ
プロパティ
color
説明 | アプリケーションのカラーパレットから使用する色。デフォルトのオプションは、"primary" 、"secondary" 、"tertiary" 、"success" 、"warning" 、"danger" 、"light" 、"medium" 、および"dark" です。色の詳細については、テーマを参照してください。 |
属性 | color |
タイプ | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
デフォルト | undefined |
mode
説明 | モードは、どのプラットフォームスタイルを使用するかを決定します。 |
属性 | mode |
タイプ | "ios" | "md" |
デフォルト | undefined |
イベント
このコンポーネントで利用可能なイベントはありません。
メソッド
このコンポーネントで使用できる公開メソッドはありません。
CSSシャドウパーツ
このコンポーネントで使用できるCSSシャドウパーツはありません。
CSSカスタムプロパティ
- iOS
- MD
名前 | 説明 |
---|---|
--background | バッジの背景 |
--color | バッジのテキスト色 |
--padding-bottom | バッジの下部のパディング |
--padding-end | 方向が左から右の場合は右のパディング、方向が右から左の場合はバッジの左のパディング |
--padding-start | 方向が左から右の場合は左のパディング、方向が右から左の場合はバッジの右のパディング |
--padding-top | バッジの上部のパディング |
名前 | 説明 |
---|---|
--background | バッジの背景 |
--color | バッジのテキスト色 |
--padding-bottom | バッジの下部のパディング |
--padding-end | 方向が左から右の場合は右のパディング、方向が右から左の場合はバッジの左のパディング |
--padding-start | 方向が左から右の場合は左のパディング、方向が右から左の場合はバッジの右のパディング |
--padding-top | バッジの上部のパディング |
スロット
このコンポーネントで利用可能なスロットはありません。