一、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();
}
}