Avatar

Phần tử hình ảnh với fallback để đại diện cho người dùng.

CNCN

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add avatar

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add avatar

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add avatar

bun

bunx @galaxy-stack/nebula-cli@latest add avatar

Sử dụng

Vue

<script setup lang="ts">
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui'
</script>

<template>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</template>

React

import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui'

export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

Angular

import { Component } from '@angular/core';
import { AvatarComponent } from '@/components/ui';

@Component({
  selector: 'app-avatar-demo',
  standalone: true,
  imports: [AvatarComponent],
  template: `
    <ui-avatar src="https://github.com/shadcn.png" alt="@shadcn">
      CN
    </ui-avatar>
  `
})
export class AvatarDemoComponent {}

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)