User · Elements

#Basic usage

Shen WenzhengKeeper of seals

Lin WanLetter room registrar

Zhou Ping

user/basic.vue

<script setup lang="ts">
import { User } from "@bysages/vue";

const people = [
  { name: "Shen Wenzheng", description: "Keeper of seals", size: "lg" as const },
  { name: "Lin Wan", description: "Letter room registrar", size: "md" as const },
  { name: "Zhou Ping", size: "sm" as const },
];
</script>

<template>
  <div class="flex flex-col gap-4">
    <User
      v-for="person in people"
      :key="person.name"
      :name="person.name"
      :description="person.description"
      :size="person.size"
    />
  </div>
</template>

#Props

#User

A person on one line: the seal before the words, the name and its quiet echo beneath. The mark is the Avatar itself — one component renders it here, so every size and shape the Avatar knows the user inherits; this row only lays the words out beside it.

Prop	Type	Default	Description
`name`	`String`		The person's name — the loud line.
`description`	`String`	`undefined`	The quiet echo beneath the name: a role, a title, an address.
`size`	`String as PropType<AvatarSize>`	`"md"`	Seal diameter: one rung of the Avatar's own ladder.
`src`	`String`	`undefined`	—
`shape`	`String as PropType<"circle" \| "square">`	`"circle"`	—