Avatar

Giới thiệu

avatar là một component Avatar linh hoạt dùng cho ứng dụng Angular. Component này cho phép hiển thị avatar người dùng với nhiều tùy chọn khác nhau như hình ảnh, chữ cái đầu, màu sắc tự động, và hỗ trợ fallback khi ảnh bị lỗi.

Tính năng

• Hiển thị hình ảnh avatar người dùng
• Tự động hiển thị chữ cái đầu khi không có ảnh
• Tạo màu nền tự động dựa trên ID
• Hỗ trợ nhiều kích thước khác nhau (16px, 24px, 32px, 40px, 48px, 64px)
• Hỗ trợ hình dạng khác nhau (tròn, vuông)
• Xử lý lỗi hình ảnh với nhiều tùy chọn fallback
• Hỗ trợ tùy chỉnh class CSS

Cài đặt

Yêu cầu

• Angular 18.0.0 trở lên
• Tailwind CSS 3.3.0 trở lên

Hướng dẫn

Để cài đặt component avatar, sử dụng npm hoặc yarn:

npm install @libs-ui/components-avatar

hoặc

yarn add @libs-ui/components-avatar

Sử dụng

Import component

// example.component.ts
import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  template: `
    <libs_ui-components-avatar
      [linkAvatar]="'https://example.com/avatar.jpg'"
      [textAvatar]="'Nguyễn Văn A'"
      [idGenColor]="'user-123'"
      [size]="40"></libs_ui-components-avatar>
  `,
})
export class ExampleComponent {
  // Component logic
}

Cách 2: Sử dụng file HTML riêng biệt

// example.component.ts
import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  // Component logic
}

<!-- example.component.html -->
<libs_ui-components-avatar
  [linkAvatar]="'https://example.com/avatar.jpg'"
  [linkAvatarError]="'https://example.com/default-avatar.jpg'"
  [textAvatar]="'Nguyễn Văn A'"
  [idGenColor]="'user-123'"
  [size]="40"
  [typeShape]="'circle'"></libs_ui-components-avatar>

Công nghệ sử dụng

• Angular 18: Sử dụng các tính năng mới nhất của Angular 18 như control flow (@if, @for), standalone components, và signals
• Tailwind CSS: Component được xây dựng với Tailwind CSS 3.3+ để quản lý style

API Reference

Inputs

| Tên | Kiểu dữ liệu | Mặc định | Mô tả | | --------------------- | ---------------------------------- | ------------ | ---------------------------------------------------------------------- | | linkAvatar | string | - | Đường dẫn của hình ảnh avatar | | linkAvatarError | string | - | Đường dẫn của hình ảnh thay thế khi avatar chính bị lỗi | | textAvatar | string | - | Văn bản hiển thị khi không có hình ảnh (thường là chữ cái đầu của tên) | | idGenColor | string | - | ID dùng để tạo màu nền tự động khi sử dụng văn bản | | size | 16 \| 24 \| 32 \| 40 \| 48 \| 64 | 32 | Kích thước của avatar (tính bằng pixel) | | typeShape | 'circle' \| 'rectangle' | 'circle' | Hình dạng của avatar (tròn hoặc vuông) | | classInclude | string | 'mr-[8px]' | CSS class bổ sung cho container chính | | classImageInclude | string | '' | CSS class bổ sung cho thẻ img | | getLastTextAfterSpace | boolean | false | Nếu true, chỉ lấy chữ cái đầu tiên của từ cuối cùng trong textAvatar | | clickPreviewImage | boolean | false | Cho phép click vào avatar để mở xem ảnh preview |

Outputs

| Tên | Kiểu dữ liệu | Mô tả | | -------------- | ------------ | ------------------------------------------------------------------------ | | outAvatarError | void | Sự kiện được kích hoạt khi linkAvatar bị lỗi và không có linkAvatarError |

Interfaces

IAvatarConfig

export interface IAvatarConfig {
  classImageInclude?: string;
  classInclude?: string;
  size?: TYPE_SIZE_AVATAR_CONFIG;
  linkAvatar?: string;
  linkAvatarError?: string;
  idGenColor?: string;
  textAvatar?: string;
  typeShape?: TYPE_SHAPE_AVATAR;
  getLastTextAfterSpace?: boolean;
}

export type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;
export type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';

Ví dụ

Avatar với ảnh và fallback

TypeScript (user-avatar.component.ts):

import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-user-avatar',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  templateUrl: './user-avatar.component.html',
})
export class UserAvatarComponent {
  user = {
    id: 'user-123',
    name: 'Nguyễn Văn A',
    avatar: 'https://example.com/avatar.jpg',
  };

  handleAvatarError() {
    console.log('Không thể tải được hình ảnh avatar');
  }
}

HTML (user-avatar.component.html):

<libs_ui-components-avatar
  [linkAvatar]="user.avatar"
  [textAvatar]="user.name"
  [idGenColor]="user.id"
  [size]="40"
  (outAvatarError)="handleAvatarError()"></libs_ui-components-avatar>

Nhóm Avatars với kích thước và hình dạng khác nhau

TypeScript (avatar-group.component.ts):

import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-avatar-group',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  templateUrl: './avatar-group.component.html',
})
export class AvatarGroupComponent {
  users = [
    {
      id: 'user-1',
      name: 'Nguyễn Văn A',
      avatar: 'https://example.com/avatar1.jpg',
      size: 64,
    },
    {
      id: 'user-2',
      name: 'Trần Thị B',
      avatar: 'https://example.com/avatar2.jpg',
      size: 48,
    },
    {
      id: 'user-3',
      name: 'Lê Văn C',
      avatar: 'https://example.com/avatar3.jpg',
      size: 32,
    },
    {
      id: 'user-4',
      name: 'Phạm Thị D',
      avatar: null,
      size: 24,
    },
  ];
}

HTML (avatar-group.component.html):

<div class="flex items-center space-x-2">
  @for (user of users; track user.id) {
  <libs_ui-components-avatar
    [linkAvatar]="user.avatar"
    [textAvatar]="user.name"
    [idGenColor]="user.id"
    [size]="user.size"
    [typeShape]="user.id === 'user-4' ? 'rectangle' : 'circle'"></libs_ui-components-avatar>
  }
</div>

Demo

Để xem các ví dụ tương tác về component Avatar, bạn có thể sử dụng LibsUiComponentsAvatarDemoComponent trong ứng dụng của mình:

import { Component } from '@angular/core';
import { LibsUiComponentsAvatarDemoComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-avatar-demo',
  standalone: true,
  imports: [LibsUiComponentsAvatarDemoComponent],
  template: `
    <lib-avatar-demo></lib-avatar-demo>
  `,
})
export class AvatarDemoComponent {}

Hoặc thêm trực tiếp trong template HTML:

<lib-avatar-demo></lib-avatar-demo>