ion-badge

shadow

バッジはインラインブロック要素で、通常は他の要素の近くに表示されます。通常、数字やその他の文字が含まれています。バッジは、ある要素に関連する追加項目があることを知らせたり、その項目の数を示したりするために使用されます。バッジは、コンテンツが渡されないと非表示になります。

基本的な使い方

<ion-list>
  <ion-item>
    <ion-badge slot="start">11</ion-badge>
    <ion-label>Badge in start slot</ion-label>
  </ion-item>
  <ion-item>
    <ion-badge slot="end">22</ion-badge>
    <ion-label>Badge in end slot</ion-label>
  </ion-item>
</ion-list>

テーマ

Colors

<ion-list>
  <ion-item>
    <ion-label>Followers</ion-label>
    <ion-badge color="primary">22k</ion-badge>
  </ion-item>
  <ion-item>
    <ion-label>Likes</ion-label>
    <ion-badge color="secondary">118k</ion-badge>
  </ion-item>
  <ion-item>
    <ion-label>Stars</ion-label>
    <ion-badge color="tertiary">34k</ion-badge>
  </ion-item>
  <ion-item>
    <ion-label>Completed</ion-label>
    <ion-badge color="success">80</ion-badge>
  </ion-item>
  <ion-item>
    <ion-label>Warnings</ion-label>
    <ion-badge color="warning">70</ion-badge>
  </ion-item>
  <ion-item>
    <ion-label>Notifications</ion-label>
    <ion-badge color="danger">1000</ion-badge>
  </ion-item>
</ion-list>

CSS Properties

src/app/example.component.html

<ion-list>
  <ion-item>
    <ion-label>Badges styled</ion-label>
    <ion-badge>1</ion-badge>
  </ion-item>
</ion-list>

src/app/example.component.css

ion-badge {
  --background: purple;
  --color: white;
  --padding-end: 20px;
  --padding-start: 20px;
}

プロパティ

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

イベント

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カスタムプロパティ

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.