Avatar Badge Button checkBox chip

来源：互联网发布：龙卷风网络收音机 mac 编辑：程序博客网时间：2024/06/03 19:00

一、Avatar

1、ion-avatar

一个avatar是一个用来在item中创建一个圆形图像的组件，他可以通过item-left或者item-right属性来决定放在item的左边还是右边。

二、Badge

1、ion-badge是一个ionic中用来包含数字或者文本的控件，你可以展示一个badge来表明这是item的新信息。

2、输入参数

（1）color：比如primary，secondary

（2）mode

三、Button

四、Checkbox

1、ion-checkbox

Checkbox可以放在ion-item或者单独使用。

2、input pot

（1）color

（2）mode

（3）checked

（4）disable

五、chip

ion-chip复杂的小框，比如联系人

<ion-chip #chip1>  <ion-label>Default</ion-label>  <button ion-button clear color="light" (click)="delete(chip1)">    <ion-icon name="close-circle"></ion-icon>  </button></ion-chip><ion-chip #chip2>  <ion-icon name="pin" color="primary"></ion-icon>  <ion-label>With Icon</ion-label>  <button ion-button (click)="delete(chip2)">    <ion-icon name="close"></ion-icon>  </button></ion-chip><ion-chip #chip3>  <ion-avatar>    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">  </ion-avatar>  <ion-label>With Avatar</ion-label>  <button ion-button clear color="dark" (click)="delete(chip3)">    <ion-icon name="close-circle"></ion-icon>  </button></ion-chip>@Component({  templateUrl: 'main.html'})class E2EPage {  delete(chip: Element) {    chip.remove();  }}

0 0