ion-chip 标签

最新推荐文章于 2023-11-10 10:45:52 发布

李少0

最新推荐文章于 2023-11-10 10:45:52 发布

阅读量798

点赞数

分类专栏： ionic3 文章标签： ionic3

本文链接：https://blog.csdn.net/li00828/article/details/78270776

版权

ionic3 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

芯片

`ion-chip`

改进此文档

芯片表示小块中的复杂实体，例如联系人。

用法

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

<ion-chip>
  <ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>

<ion-chip color="secondary">
  <ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>

<ion-chip color="danger">
  <ion-label>Danger</ion-label>
</ion-chip>

<ion-chip>
  <ion-icon name="pin"></ion-icon>
  <ion-label>Default</ion-label>
</ion-chip>

<ion-chip>
  <ion-icon name="heart" color="dark"></ion-icon>
  <ion-label>Default</ion-label>
</ion-chip>

<ion-chip>
  <ion-avatar>
    <img src="assets/img/my-img.png">
  </ion-avatar>
  <ion-label>Default</ion-label>
</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();
  }
}

Sass变量

所有 iOS 材料设计 Windows平台

属性	默认	描述
`$chip-button-border-radius`	`50%`	芯片中按钮的边框半径
`$chip-button-margin-top`	`0`	芯片上按钮的边缘顶部
`$chip-button-margin-end`	`$chip-button-margin-top`	芯片中按钮的边缘端
`$chip-button-margin-bottom`	`$chip-button-margin-top`	芯片底部按钮的边缘
`$chip-button-margin-start`	`$chip-button-margin-end`	芯片中按钮的开始边缘
`$chip-button-size`	`32px`	芯片中按钮的宽度和高度
`$chip-icon-border-radius`	`50%`	芯片中图标的边框半径
`$chip-icon-text-align`	`center`	芯片中图标的文本对齐
`$chip-icon-size`	`32px`	芯片中图标的宽度和高度
`$chip-icon-font-size`	`18px`	芯片中图标的字体大小
`$chip-avatar-size`	`32px`	芯片中化身的宽度和高度
`$chip-avatar-border-radius`	`50%`	芯片中化身的边框半径