ion-chip
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
- src/app/example.component.html
ion-chip {
--background: #00213f;
--color: #adefd1;
}
プロパティ
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.