อวตาร
คอมโพเนนต์ Avatar เป็นองค์ประกอบที่หลากหลายและใช้กันทั่วไปในอินเทอร์เฟซผู้ใช้ ออกแบบมาเพื่อแสดงถึงผู้ใช้หรือเอนทิตีในเชิงภาพ สามารถแสดงรูปภาพ ชื่อย่อ หรือไอคอน และสามารถปรับแต่งได้หลากหลายวิธี รวมถึงขนาด โทน และตัวแปร เพื่อให้เหมาะกับความต้องการในการออกแบบที่แตกต่างกัน อวตารยังสามารถรวมถึงตัวบ่งชี้การแจ้งเตือนและป้าย เพื่อการสื่อสารภาพที่เพิ่มขึ้น และสามารถปิดใช้งานเพื่อป้องกันการโต้ตอบของผู้ใช้เมื่อจำเป็น
การใช้งานพื้นฐาน
A
vue
<template>
<spr-avatar />
</template>การแจ้งเตือน
A
0
vue
<template>
<spr-avatar :notification="true" />
</template>ป้าย
A
0
vue
<template>
<spr-avatar :badge="true" />
</template>รูปภาพ
0
0
vue
<template>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="2xl"
/>
</template>ขนาด
คอมโพเนนต์ avatar มีขนาด 7 แบบที่แตกต่างกัน คุณสามารถใช้ prop size เพื่อกำหนดขนาดของ avatar ขนาดเริ่มต้นคือ 2xl ขนาดที่มีให้เลือกคือ 2xl, xl, lg, md, sm, xs, 2xs
0
0
0
0
0
0
vue
<template>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="2xl"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="xl"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="lg"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="md"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="sm"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="xs"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="2xs"
/>
</template>ตัวแปร
JC
JJ
A
JC
JC
J
J
+10
+2
+3
+4
+5
+6
+7
vue
<template>
<div class="spr-grid spr-gap-4">
<div class="spr-space-x-3">
<spr-avatar initial="Juan Dela Cruz" size="2xl" />
<spr-avatar initial="John Jay Joe" size="xl" />
<spr-avatar initial="Anthony" size="lg" />
<spr-avatar initial="Juan Dela Cruz" size="md" />
<spr-avatar initial="Juan Dela Cruz" size="sm" />
<spr-avatar initial="Juan Dela Cruz" size="xs" />
<spr-avatar initial="Juan Dela Cruz" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="count" count="10" color="secondary" size="2xl" />
<spr-avatar variant="count" count="2" color="secondary" size="xl" />
<spr-avatar variant="count" count="3" color="secondary" size="lg" />
<spr-avatar variant="count" count="4" color="secondary" size="md" />
<spr-avatar variant="count" count="5" color="secondary" size="sm" />
<spr-avatar variant="count" count="6" color="secondary" size="xs" />
<spr-avatar variant="count" count="7" color="secondary" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="user-group" size="2xl" />
<spr-avatar variant="user-group" size="xl" />
<spr-avatar variant="user-group" size="lg" />
<spr-avatar variant="user-group" size="md" />
<spr-avatar variant="user-group" size="sm" />
<spr-avatar variant="user-group" size="xs" />
<spr-avatar variant="user-group" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="user" size="2xl" />
<spr-avatar variant="user" size="xl" />
<spr-avatar variant="user" size="lg" />
<spr-avatar variant="user" size="md" />
<spr-avatar variant="user" size="sm" />
<spr-avatar variant="user" size="xs" />
<spr-avatar variant="user" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="client" size="2xl" />
<spr-avatar variant="client" size="xl" />
<spr-avatar variant="client" size="lg" />
<spr-avatar variant="client" size="md" />
<spr-avatar variant="client" size="sm" />
<spr-avatar variant="client" size="xs" />
<spr-avatar variant="client" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="users-four" size="2xl" />
<spr-avatar variant="user-sound" size="xl" />
<spr-avatar variant="airplane" size="lg" />
<spr-avatar variant="android-logo" size="md" />
<spr-avatar variant="arrow-down" size="sm" />
<spr-avatar variant="arrow-up" size="xs" />
<spr-avatar variant="arrow-left" size="2xs" />
</div>
</div>
</template>สล็อต
สามารถใช้สล็อตเพื่อเพิ่มเนื้อหาแบบกำหนดเองให้กับ avatar หมายเหตุ: ปรับเนื้อหาแบบกำหนดเองให้พอดีกับขนาด avatar
A
0
0
A
0
A
0
A
0
A
0
A
A
A
0
0
A
0
A
0
A
0
A
0
A
A
vue
<template>
<div>
<spr-avatar :notification="true" :badge="true" size="2xl" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xl" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="lg" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="md" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="sm" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xs" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="2xs" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
</div>
<div>
<spr-avatar :notification="true" :badge="true" size="2xl">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xl">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="lg">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="md">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="sm">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xs">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="2xs">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
</div>
</template>
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>สถานะ
M
0
M
0
J
0
M
0
vue
<template>
<spr-avatar variant="initial" status="danger" initial="Matthew" :badge="true" size="2xl" />
<spr-avatar variant="initial" status="disabled" initial="Mark" :badge="true" size="2xl" />
<spr-avatar variant="initial" status="information" initial="John" :badge="true" size="2xl" />
<spr-avatar variant="initial" status="brand" initial="Mary" :badge="true" size="2xl" />
</template>กำลังโหลด
vue
<template>
<div>
<spr-avatar loading size="2xl" />
<spr-avatar loading size="xl" />
<spr-avatar loading size="lg" />
<spr-avatar loading size="md" />
<spr-avatar loading size="sm" />
<spr-avatar loading size="xs" />
<spr-avatar loading size="2xs" />
</div>
</template>API Reference
Props
| ชื่อ | คำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| variant | กำหนดประเภทของ avatar ที่จะแสดง:
| 'image' | 'initial' | 'client' | 'user' | 'user-group' | 'count' | 'initial' |
| src | URL สำหรับรูปภาพ avatar เมื่อใช้ variant="image" หากไม่ได้ระบุเมื่อใช้ตัวแปรรูปภาพ จะกลับไปใช้ไอคอนที่เหมาะสมตามตัวแปร | string | undefined |
| alt | ข้อความทางเลือกสำหรับรูปภาพ avatar เพื่อการเข้าถึง สำคัญสำหรับโปรแกรมอ่านหน้าจอเพื่อระบุเนื้อหา avatar | string | 'Avatar' |
| size | ควบคุมขนาดของ avatar มีผลต่อมิติ ขนาดตัวอักษร และตำแหน่งของตัวบ่งชี้:
| '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '2xl' |
| notification | เมื่อ true จะแสดงตัวบ่งชี้การแจ้งเตือนขนาดเล็ก (ป้าย) ที่มุมขวาบนของ avatar การแจ้งเตือนใช้สีตัวแปร danger | boolean | false |
| notificationText | ข้อความที่จะแสดงในตัวบ่งชี้การแจ้งเตือน โดยปกติจะเป็นตัวเลข มองเห็นได้เฉพาะเมื่อ notification เป็น true | string | '0' |
| badge | เมื่อ true จะแสดงป้ายสถานะที่มุมขวาล่างของ avatar สีของป้ายถูกกำหนดโดย prop status | boolean | false |
| initial | ข้อความที่จะแสดงเมื่อใช้ variant="initial" คอมโพเนนต์จะดึงชื่อย่อโดยอัตโนมัติตามกฎเหล่านี้:
| string | 'Avatar' |
| color | โครงร่างสีพื้นหลังสำหรับ avatar:
| 'primary' | 'secondary' | 'primary' |
| status | ประเภทตัวบ่งชี้สถานะเมื่อ badge เป็น true:
| 'brand' | 'information' | 'danger' | 'disabled' | 'brand' |
| count | ค่าตัวเลขที่จะแสดงเมื่อใช้ variant="count" จะถูกแสดงพร้อมคำนำหน้า "+" (เช่น "+10") | number | 0 |
| loading | เมื่อ true จะแสดงภาพเคลื่อนไหวสถานะการโหลดแบบโครงกระดูกแทนเนื้อหา avatar จริง มีประโยชน์ในการแสดงสถานะการโหลดขณะดึงข้อมูล | boolean | false |
Events
| ชื่อ | คำอธิบาย | พารามิเตอร์ |
|---|---|---|
| imageError | ถูกปล่อยออกมาเมื่อแหล่งที่มาของรูปภาพไม่ใช่รูปภาพ |
Slots
| ชื่อ | คำอธิบาย |
|---|---|
| default | เนื้อหาแบบกำหนดเองที่จะแสดงภายใน avatar สามารถใช้เพื่อสร้าง avatar แบบกำหนดเองด้วยไอคอน รูปภาพ หรือเนื้อหาอื่นๆ เมื่อมีการระบุสล็อตนี้ จะมีความสำคัญเหนือกว่าการแสดงไอคอนหรือชื่อย่อมาตรฐาน เนื้อหาสล็อตจะถูกห่อหุ้มในคอนเทนเนอร์เดียวกันกับรูปภาพหรือไอคอน โดยมีขนาดและการจัดรูปแบบที่เหมาะสม หมายเหตุ: คุณควรปรับเนื้อหาแบบกำหนดเองให้พอดีกับขนาด avatar โดยเฉพาะตัวแปรขนาดที่เล็กกว่า |
การใช้ผลิตภัณฑ์
