头像

v-avatar 组件通常用于显示用户个人资料的圆形图片。该组件将允许你动态调整大小并添加响应图像，图标和文本的边框半径。tile 变量可用来显示方形头像。

用例

头像以最简单的形式在圆形容器中显示内容。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

大小

size 属性允许你定义 v-avatar 的高度和宽度。这个属性以 1 的长宽比均匀缩放。height 和 width 属性将会覆盖这个属性。

template

<template>
  <v-row justify="space-around">
    <v-avatar color="indigo" size="36">
      <span class="white--text headline">36</span>
    </v-avatar>
    <v-avatar color="teal" size="48">
      <span class="white--text headline">48</span>
    </v-avatar>
    <v-avatar color="orange" size="62">
      <span class="white--text headline">62</span>
    </v-avatar>
  </v-row>
</template>

平铺

tile 属性会移除圆形边框，为你提供简单的正方形 v-avatar。

template

<template>
  <div class="text-center">
    <v-avatar tile color="blue">
      <v-icon dark>mdi-alarm</v-icon>
    </v-avatar>
  </div>
</template>

默认插槽

v-avatar 的默认插槽将接受 v-icon 组件、图像或文本。混合并匹配这些元素来创建一个独一无二的东西。

template

<template>
  <v-row justify="space-around">
    <v-avatar color="indigo">
      <v-icon dark>mdi-account-circle</v-icon>
    </v-avatar>
    <v-avatar>
      <img
        src="https://cdn.vuetifyjs.com/images/john.jpg"
        alt="John"
      >
    </v-avatar>
    <v-avatar color="red">
      <span class="white--text headline">CJ</span>
    </v-avatar>
  </v-row>
</template>

Black Vuetify Cap

An updated classic that won’t break the bank! This hat perfectly combines style and function.

ads by Vuetify

](https://store.vuetifyjs.com/product/black-vuetify-logo-cap?ref=vuetifyjs.com)

个人资料卡

使用 tile 属性，我们可以创建一个光滑的内衬型卡。

template

<template>
  <v-card
    class="mx-auto"
    max-width="434"
    tile
  >
    <v-img
      height="100%"
      src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"
    >
      <v-row
        align="end"
        class="fill-height"
      >
        <v-col
          align-self="start"
          class="pa-0"
          cols="12"
        >
          <v-avatar
            class="profile"
            color="grey"
            size="164"
            tile
          >
            <v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"></v-img>
          </v-avatar>
        </v-col>
        <v-col class="py-0">
          <v-list-item
            color="rgba(0, 0, 0, .4)"
            dark
          >
            <v-list-item-content>
              <v-list-item-title class="title">Marcus Obrien</v-list-item-title>
              <v-list-item-subtitle>Network Engineer</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-col>
      </v-row>
    </v-img>
  </v-card>
</template>

高级用法

将头像与其他组件组合在一起，你就可以构建漂亮的用户界面。

template script

<template>
  <v-container fluid>
    <v-row justify="center">
      <v-subheader>Today</v-subheader>
      <v-expansion-panels popout>
        <v-expansion-panel
          v-for="(message, i) in messages"
          :key="i"
          hide-actions
        >
          <v-expansion-panel-header>
            <v-row
              align="center"
              class="spacer"
              no-gutters
            >
              <v-col
                cols="4"
                sm="2"
                md="1"
              >
                <v-avatar
                  size="36px"
                >
                  <img
                    v-if="message.avatar"
                    alt="Avatar"
                    src="https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"
                  >
                  <v-icon
                    v-else
                    :color="message.color"
                    v-text="message.icon"
                  ></v-icon>
                </v-avatar>
              </v-col>
              <v-col
                class="hidden-xs-only"
                sm="5"
                md="3"
              >
                <strong v-html="message.name"></strong>
                <span
                  v-if="message.total"
                  class="grey--text"
                >
                  &nbsp;({{ message.total }})
                </span>
              </v-col>
              <v-col
                class="text-no-wrap"
                cols="5"
                sm="3"
              >
                <v-chip
                  v-if="message.new"
                  :color="`${message.color} lighten-4`"
                  class="ml-0 mr-2 black--text"
                  label
                  small
                >
                  {{ message.new }} new
                </v-chip>
                <strong v-html="message.title"></strong>
              </v-col>
              <v-col
                v-if="message.excerpt"
                class="grey--text text-truncate hidden-sm-and-down"
              >
                &mdash;
                {{ message.excerpt }}
              </v-col>
            </v-row>
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-divider></v-divider>
            <v-card-text v-text="lorem"></v-card-text>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      messages: [
        {
          avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460',
          name: 'John Leider',
          title: 'Welcome to Vuetify.js!',
          excerpt: 'Thank you for joining our community...',
        },
        {
          color: 'red',
          icon: 'people',
          name: 'Social',
          new: 1,
          total: 3,
          title: 'Twitter',
        },
        {
          color: 'teal',
          icon: 'local_offer',
          name: 'Promos',
          new: 2,
          total: 4,
          title: 'Shop your way',
          exceprt: 'New deals available, Join Today',
        },
      ],
      lorem: 'Lorem ipsum dolor sit amet, at aliquam vivendum vel, everti delicatissimi cu eos. Dico iuvaret debitis mel an, et cum zril menandri. Eum in consul legimus accusam. Ea dico abhorreant duo, quo illum minimum incorrupte no, nostro voluptaria sea eu. Suas eligendi ius at, at nemore equidem est. Sed in error hendrerit, in consul constituam cum.',
    }),
  }
</script>