头像 Avatar

我在社交软件不认昵称只认头像

大小

面子很大

Dusk

import { Avatar } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Avatar size="ty" src="/avatar/avatar.png" />
      <Avatar size="sm" text="Dusk" />
      <Avatar src="/avatar/avatar.png" />
      <Avatar size="lg" text="Dusk" />
      <Avatar size="xl" src="/avatar/avatar.png" />
    </>
  )
}

形状

使用 rounded 让它变成圆的

import { Avatar } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Avatar src="/avatar/avatar.png" />
      <Avatar rounded src="/avatar/avatar.png" />
    </>
  )
}

边框

bordered 添加边框
borderColor 调整边框颜色

import { Avatar } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Avatar src="/avatar/avatar.png" bordered className="mr-2" />
      <Avatar src="/avatar/avatar.png" bordered borderColor="#00b3bb" rounded />
    </>
  )
}

背景

backgroundColor 调整背景颜色
textColor 调整文字颜色

Exusiai

import { Avatar } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Avatar size="xl" text="Exusiai" textColor="crimson" />
      <Avatar size="xl" backgroundColor="#ef8923" src="/avatar/exusiai.png" />
      <Avatar size="xl" backgroundColor="#313131" src="/avatar/exusiai.png" />
    </>
  )
}

文字

Github 没有头像的人分两种：刚注册的新手和巨佬

Dusk

import { useState } from "react"
import { Input } from "mmixel-ui"
 
export const AvatarText = () => {
  const [inputText, setInputText] = useState("Dusk")
  return (
    <>
      <div className="flex gap-2 mb-2">
        <Avatar text={inputText} />
        <Avatar
          rounded
          text={inputText}
          backgroundColor="#313131"
          textColor="white"
        />
      </div>
      <Input value={inputText} setValue={setInputText} />
    </>
  )
}

头像组

好多人啊

Nian

Texas

import { Avatar } from "mmixel-ui"
 
export default function App() {
  const members = [
    {
      src: "/avatar/avatar.png",
    },
    {
      text: "Nian",
      bordered: true,
      borderColor: "#f34e0e",
    },
    {
      src: "/avatar/exusiai.png",
      backgroundColor: "#313131",
    },
    {
      text: "Texas",
      textColor: "white",
      backgroundColor: "linear-gradient(45deg, #443ab4, #1d83d8)",
    },
    {
      src: "/avatar/rick_astley.jpg",
    },
  ]
 
  return (
    <Avatar.Group more={7}>
      {members.map((member, i) => (
        <Avatar key={i} {...member} />
      ))}
    </Avatar.Group>
  )
}

懒加载

使用 lazy 调整懒加载模式

lazy 默认为true

import { Avatar } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Avatar src="/avatar/avatar.png" />
      <Avatar lazy={false} src="/avatar/avatar.png" />
    </>
  )
}

Avatar Props

Prop	Type	Default	Desc
src	`string`	`undefined`	头像的 URL 地址
text	`string`	`undefined`	头像显示的文字
alt	`string`	`undefined`	头像无法显示时的替代文本
size	`"ty" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	头像的大小
rounded	`boolean`	`false`	头像是否圆形
bordered	`boolean`	`false`	头像是否带边框
borderColor	`string`	`undefined`	头像边框颜色
backgroundColor	`string`	`undefined`	头像背景颜色
textColor	`string`	`undefined`	头像文字颜色
lazy	`boolean`	`true`	头像是否懒加载
onError	`(e: Event) => void`	`undefined`	头像加载失败时的回调

AvatarGroup Props

Prop	Type	Default	Desc
more	`number`	`undefined`	有更多头像时显示的数字
textColor	`string`	`undefined`	更多头像文字的颜色
backgroundColor	`string`	`undefined`	更多头像标志的颜色
size	`"ty" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	更多头像标志的大小

安装按钮 Button