AvatarGroup

Penggunaan

Bungkus beberapa komponen SAvatar di dalam SAvatarGroup untuk menumpuknya dengan ring yang tumpang tindih. Grup meneruskan size ke setiap avatar anak secara otomatis - avatar individu yang mengatur size mereka sendiri tetap mengambil prioritas.

<SAvatarGroup>
  <SAvatar text="AB" color="primary" />
  <SAvatar text="CD" color="success" />
  <SAvatar text="EF" color="info" />
</SAvatarGroup>

Max

max membatasi berapa avatar yang terlihat. Avatar tambahan menciut menjadi indikator hitungan +N. Anak statis, v-for, dan daftar <template v-for> menggunakan batas dan styling tumpang tindih yang sama. Spasi kosong dan placeholder kondisional tidak dihitung.

<script setup lang="ts">
const people = ['AB', 'CD', 'EF', 'GH']
</script>

<template>
  <SAvatarGroup :max="2">
    <SAvatar v-for="person in people" :key="person" :text="person" />
  </SAvatarGroup>
</template>

Ukuran

size mengontrol ketebalan ring dan jarak tumpang tindih, serta meneruskan ke setiap avatar anak yang tidak mengatur size sendiri.

<SAvatarGroup size="sm">
  <SAvatar text="AB" color="primary" />
  <SAvatar text="CD" color="success" />
</SAvatarGroup>

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema AvatarGroup sendiri:

Global dan scoped theme recipes menggunakan ui.avatarGroup; avatar anak tetap mempertahankan resep ui.avatar mereka sendiri.

Props