简单的徽章展示，当 value 为 0 时，默认不显示，但是可以使用 showZero 修改为显示。

<script setup lang="ts">
  import { Avatar, Badge, Space } from '@lite-space/ui'
</script>

<template>
  <Space :size="20">
    <Badge value="25">
      <Avatar shape="square" size="large" />
    </Badge>

    <Badge value="0" show-zero>
      <Avatar shape="square" size="large" />
    </Badge>

    <Badge>
      <template #value>
        slot
      </template>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot />
  </space>
</template>

不包裹任何元素即是独立使用，可自定样式展现

<script setup lang="ts">
  import { Badge, Space } from '@lite-space/ui'
</script>

<template>
  <Space :size="20">
    <Badge value="25" />
    <Badge value="0" />
    <Badge dot />
  </space>
</template>

超过 max 的会显示为 ${max}+

<script setup lang="ts">
  import { Avatar, Badge } from '@lite-space/ui'
</script>

<template>
  <Badge value="100" :max="99">
    <Avatar shape="square" size="large" />
  </Badge>
</template>

设置状态点的位置偏移，格式为 [left, top]，表示状态点距默认位置左侧、上方的偏移量。

<script setup lang="ts">
  import { Avatar, Badge } from '@lite-space/ui'
</script>

<template>
  <Badge value="25" :offset="[10, 5]">
    <Avatar shape="square" size="large" />
  </Badge>
</template>