头像 & 徽标
v2.0.5+

头像和徽标是常用的 UI 装饰组件。头像支持图片、文字首字母、状态指示点；徽标支持红点、数字计数、颜色变体。纯 CSS 实现。

头像 — 基础

  • Preview
  • Code
A
B
C
D
E
<div class="bny-avatar" size="xs">A</div>
<div class="bny-avatar" size="sm">B</div>
<div class="bny-avatar">C</div>
<div class="bny-avatar" size="lg">D</div>
<div class="bny-avatar" size="xl">E</div>

头像 — 图片 & 形状 & 颜色

  • Preview
  • Code

图片头像

avatar
avatar
avatar

方形 shape="square"

A
B
C

彩色 color="green"

G
B
Y
R
<!-- 图片 -->
<div class="bny-avatar">
    <img src="/bunny.png" alt="avatar">
</div>

<!-- 方形 -->
<div class="bny-avatar" shape="square">A</div>

<!-- 彩色 -->
<div class="bny-avatar" color="green">G</div>
<div class="bny-avatar" color="blue">B</div>
<div class="bny-avatar" color="yellow">Y</div>
<div class="bny-avatar" color="red">R</div>

头像 — 状态指示

  • Preview
  • Code
avatar
avatar
avatar
avatar 
<div class="bny-avatar" size="lg">
    <img src="/bunny.png" alt="avatar">
    <span class="bny-avatar-status online"></span>
</div>
<div class="bny-avatar" size="lg">
    <img src="/bunny.png" alt="avatar">
    <span class="bny-avatar-status busy"></span>
</div>
<div class="bny-avatar" size="lg">
    <img src="/bunny.png" alt="avatar">
    <span class="bny-avatar-status away"></span>
</div>

头像组

  • Preview
  • Code
+3
H
I
J
K
<div class="bny-avatar-group">
    <div class="bny-avatar">+3</div>
    <div class="bny-avatar" color="red">H</div>
    <div class="bny-avatar" color="yellow">I</div>
    <div class="bny-avatar" color="blue">J</div>
    <div class="bny-avatar" color="green">K</div>
</div>

徽标 — 附属在元素上

  • Preview
  • Code

图标上的徽标

5 99+

头像上的徽标

avatar
avatar
3 
<!-- 图标 + 红点 -->
<span class="bny-badge">
    <i class="bny-icon icon-notification"></i>
    <span class="bny-badge-dot"></span>
</span>

<!-- 图标 + 数字 -->
<span class="bny-badge">
    <i class="bny-icon icon-email"></i>
    <span class="bny-badge-count">5</span>
</span>

<!-- 头像 + 徽标 -->
<span class="bny-badge">
    <div class="bny-avatar" size="lg">...</div>
    <span class="bny-badge-count">3</span>
</span>

徽标 — 独立使用

  • Preview
  • Code

数字徽标

1 99+ 128 999+

彩色徽标 color="green"

新 热 顶 99+ off

圆点徽标 .dot

<!-- 数字 -->
<span class="bny-badge-standalone">1</span>
<span class="bny-badge-standalone" size="lg">128</span>

<!-- 彩色 -->
<span class="bny-badge-standalone" color="green">新</span>
<span class="bny-badge-standalone" color="red">99+</span>

<!-- 圆点 -->
<span class="bny-badge-standalone dot" color="red"></span>
<span class="bny-badge-standalone dot" color="green"></span>

API

Avatar 属性

属性 可选值 说明
size xs / sm / (default) / lg / xl 24px / 32px / 40px / 56px / 72px
shape square 方形圆角，默认圆形
color green / blue / yellow / red 背景色
bny-avatar-status online / busy / away / (default) 状态指示点，绿 / 红 / 黄 / 灰

Badge 类名

类名 说明
bny-badge 附属徽标容器（相对定位），包裹目标元素 + 徽标
bny-badge-dot 小红点（8px 圆），默认右上角
bny-badge-count 数字徽标，可加 .lg 变大
bny-badge-green 等 徽标颜色变体
bny-badge-standalone 独立徽标，可配 color size .dot