ion-avatar

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4媒体组件ion-avatar对项目进行布局。

ion-avatar官方文档地址:https://ionicframework.com/docs/api/avatar

Avatars 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