ion-avatar
Ionic4项目中我们可以使用Ionic4媒体组件ion-avatar对项目进行布局。 ion-avatar官方文档地址:https://ionicframework.com/docs/api/avatarAvatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
Avatars can be used by themselves or inside of any element. If placed inside of an ion-chip
or ion-item
, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to start
or end
, respectively.
ion-avatar 用法(Usage)
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-label>Chip Avatarion-label>
ion-chip>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-label>Item Avatarion-label>
ion-item>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-label>Chip Avatarion-label>
ion-chip>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-label>Item Avatarion-label>
ion-item>
import React from 'react'
import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/react';
const AvatarExample: React.SFC<{}> = () => (
<>
<IonAvatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
IonAvatar>
<IonChip>
<IonAvatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
IonAvatar>
<IonLabel>Chip AvatarIonLabel>
IonChip>
<IonItem>
<IonAvatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
IonAvatar>
<IonLabel>Item AvatarIonLabel>
IonItem>
>
);
export default AvatarExample;
<template>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-label>Chip Avatarion-label>
ion-chip>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
ion-avatar>
<ion-label>Item Avatarion-label>
ion-item>
template>
ion-avatar中的CSS 自定义属性
Name | Description |
---|---|
--border-radius | Border radius of the avatar and inner image |