Ionic组件 ion-avatar ion-icon ion-img ion-thumbnail

1 ion-avatar

Avatars 是通常包裹 image or icon的圆形组件。它们可以用来表示一个person or an object。
Avatars 可以自己使用，也可以在任何元素内部使用。如果放置在ion-chip or ion-item内部，avatar 将调整大小以适应父组件。要将avatar 定位在item的左侧或右侧，请分别将the slot to start or end。
在这里插入图片描述

<ion-avatar>
  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
</ion-avatar>

1.1 Chip Avatar

在这里插入图片描述

<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>Chip Avatar</ion-label>
</ion-chip>

1.2 Item Avatar

在这里插入图片描述

<ion-item>
  <ion-avatar slot="start">
    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
  </ion-avatar>
  <ion-label>Item Avatar</ion-label>
</ion-item>

1.3 Theming

在这里插入图片描述

<ion-avatar>
  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
</ion-avatar>

ion-avatar {
  --border-radius: 4px;
}

2 ion-icon

在这里插入图片描述

<ion-icon name="logo-ionic"></ion-icon>
<ion-icon name="logo-ionic" size="large"></ion-icon>
<ion-icon name="logo-ionic" color="primary"></ion-icon>
<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>

2.1 Accessibility

Icons 是装饰性内容的图标应该有 ariahidden=“true”。这不会在视觉上隐藏图标，但会从辅助技术中隐藏元素。

<ion-icon name="heart" aria-hidden="true"></ion-icon>

如果icon 是交互式的，则应该通过添加aria-label来定义替换文本。

<ion-icon name="heart" aria-label="Favorite"></ion-icon>

或者，如果icon 位于它所描述的另一个元素内部，则该元素应该添加 aria-label ，并且应该使用 aria-hidden来隐藏图标。
在这里插入图片描述

<ion-button aria-label="Favorite">
  <ion-icon name="heart" aria-hidden="true"></ion-icon>
</ion-button>

3 ion-img

在这里插入图片描述

<ion-img
  src="https://docs-demo.ionic.io/assets/madison.jpg"
  alt="The Wisconsin State Capitol building in Madison, WI at night"
></ion-img>

4 ion-thumbnail

Thumbnails 是通常包裹 image or icon组件。它们可以用来更容易地显示一组较大的图像，或者提供全尺寸图像的预览。

Thumbnails 可以自己使用，也可以在任何元素内部使用。如果放置在 ion-item内部，Thumbnails 将调整大小以适应父组件。要将Thumbnails 定位在项目的左侧或右侧，请分别将slot to start or end。

在这里插入图片描述

<ion-thumbnail>
  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
</ion-thumbnail>

4.1 Item Thumbnails

在这里插入图片描述

<ion-item>
  <ion-thumbnail slot="start">
    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
  </ion-thumbnail>
  <ion-label>Item Thumbnail</ion-label>
</ion-item>