ion-chip

shadow

Chipは連絡先などを複数の小さなエンティティで表示します。 Chipにはavatars, text, や iconsなど、いくつかの異なる要素を含めることができます。

基本的な使い方

<ion-chip>Default</ion-chip>
<ion-chip [disabled]="true">Disabled</ion-chip>
<ion-chip [outline]="true">Outline</ion-chip>

Slotting Components and Icons

<ion-chip>
  <ion-avatar>
    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
  </ion-avatar>
  <ion-label>Avatar Chip</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>

<ion-chip>
  <ion-icon name="pin" color="primary"></ion-icon>
  <ion-label>Icon Chip</ion-label>
  <ion-icon name="close"></ion-icon>
</ion-chip>

テーマ

Colors

<ion-chip>Default</ion-chip>
<ion-chip color="primary">Primary</ion-chip>
<ion-chip color="secondary">Secondary</ion-chip>
<ion-chip color="tertiary">Tertiary</ion-chip>
<ion-chip color="success">Success</ion-chip>
<ion-chip color="warning">Warning</ion-chip>
<ion-chip color="danger">Danger</ion-chip>
<ion-chip color="light">Light</ion-chip>
<ion-chip color="medium">Medium</ion-chip>
<ion-chip color="dark">Dark</ion-chip>

CSSカスタムプロパティ

src/app/example.component.css

ion-chip {
  --background: #00213f;
  --color: #adefd1;
}

src/app/example.component.html

<ion-chip>Default</ion-chip>

プロパティ

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 & Record<never, never> ｜ undefined
Default	undefined

disabled

Description	trueの場合、ユーザはチップと対話することができません。
Attribute	disabled
Type	boolean
Default	false

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

outline

Description	アウトラインスタイルボタンを表示します。
Attribute	outline
Type	boolean
Default	false

イベント

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	チップの色

Slots

No slots available for this component.