ion-badge
Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. Badges are hidden if no content is passed in.
Basic Usage
Theming
Colors
CSS Properties
Properties
color
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| 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.