ion-badge
バッジはインラインブロック要素で、通常は他の要素の近くに表示されます。通常、数字やその他の文字が含まれています。バッジは、ある要素に関連する追加項目があることを知らせたり、その項目の数を示したりするために使用されます。バッジは、コンテンツが渡されないと非表示になります。
基本的な使い方
テーマ
Colors
CSS Properties
プロパティ
color
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
- iOS
- MD
| Name | Description |
|---|---|
--background | バッジの背景 |
--color | バッジの文字色 |
--padding-bottom | バッジのBottom Padding |
--padding-end | バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | バッジのTop Padding |
| Name | Description |
|---|---|
--background | バッジの背景 |
--color | バッジの文字色 |
--padding-bottom | バッジのBottom Padding |
--padding-end | バッジの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | バッジの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | バッジのTop Padding |
Slots
No slots available for this component.