BootstrapVue Avatar 头像样式、主题、大小

BootstrapVue Avatar 头像样式、主题、大小、圆形还是方形。

Avatar主题

例子

<template>
  <div>
    <b-avatar variant="secondary"></b-avatar>
    <b-avatar variant="primary"></b-avatar>
    <b-avatar variant="dark"></b-avatar>
    <b-avatar variant="light"></b-avatar>
    <b-avatar variant="success"></b-avatar>
    <b-avatar variant="danger"></b-avatar>
    <b-avatar variant="warning"></b-avatar>
    <b-avatar variant="info"></b-avatar>
  </div>
</template>

Avatar大小

例子

<template>
  <div>
    <b-avatar></b-avatar>
    <b-avatar size="sm"></b-avatar>
    <b-avatar size="lg"></b-avatar>
    <b-avatar :size="24"></b-avatar>
    <b-avatar size="3em"></b-avatar>
    <b-avatar size="72px"></b-avatar>
  </div>
</template>

Square方形

<template>
  <div>
    <b-avatar square></b-avatar>
  </div>
</template>

Rounding圆角

支持true, 'sm', 'lg', 'top', 'left', 'right', or 'bottom'

例子

<template>
  <div style="font-size: 2rem;">
    <b-avatar rounded="sm"></b-avatar>
    <b-avatar rounded></b-avatar>
    <b-avatar rounded="lg"></b-avatar>
    <b-avatar rounded="top"></b-avatar>
    <b-avatar rounded="left"></b-avatar>
    <b-avatar rounded="right"></b-avatar>
    <b-avatar rounded="bottom"></b-avatar>
  </div>
</template>

Alignment对齐方式

// .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top
<b-avatar class="align-baseline"></b-avatar>  
<b-avatar class="align-top"></b-avatar>