Badge

Giới thiệu

@libs-ui/components-badge là một component Angular linh hoạt để hiển thị các chỉ số số học như thông báo, trạng thái và số liệu quan trọng. Component hỗ trợ nhiều chế độ hiển thị, trạng thái active và tooltip tùy chỉnh.

Tính năng

• Định dạng số: hiển thị số nguyên, với dấu cộng, viết tắt K (nghìn) và M (triệu)
• Hỗ trợ trạng thái active
• Tooltip thông tin với cấu hình linh hoạt (IPopoverOverlay)
• Tùy chỉnh giao diện bằng CSS class và điều khiển margin

Cài đặt

Yêu cầu

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

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

npm install @libs-ui/components-badge

hoặc

yarn add @libs-ui/components-badge

Sử dụng

Inline Template

import { Component } from '@angular/core';
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsBadgeComponent],
  template: `
    <libs_ui-components-badge
      [count]="newMessages"
      [mode]="'k'"
      [active]="true"
      [popoverConfig]="{ content: newMessages + ' tin nhắn mới' }"></libs_ui-components-badge>
  `,
})
export class ExampleComponent {
  newMessages = 12;
}

File HTML riêng

import { Component } from '@angular/core';
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';

@Component({
  selector: 'app-tooltip-example',
  standalone: true,
  imports: [LibsUiComponentsBadgeComponent],
  templateUrl: './tooltip-example.component.html',
})
export class TooltipExampleComponent {
  newMessages = 12;
}

<libs_ui-components-badge
  [count]="newMessages"
  [popoverConfig]="{ content: newMessages + ' tin nhắn mới' }"
  [active]="true"></libs_ui-components-badge>

Công nghệ sử dụng

• Angular 18: standalone components, Signals
• Tailwind CSS: cho styling

API Reference

Inputs

| Tên | Kiểu | Mặc định | Mô tả | | -------------------------- | ----------------- | ------------------------- | ----------------------------------------------------------------------------- | | count | number | 0 | Số cần hiển thị trong badge | | mode | TYPE_BADGE_MODE | undefined | Chế độ hiển thị: 'x' | 'x+' | '+x' | 'k' | '0x' | | active | boolean | undefined | Xác định badge có đang ở trạng thái active hay không | | maxCount | number | Number.MAX_SAFE_INTEGER | Số tối đa để hiển thị trước khi áp dụng định dạng | | popoverConfig | IPopoverOverlay | undefined | Cấu hình popover khi di chuột qua badge | | ignoreMarginDefault | boolean | undefined | Bỏ qua margin mặc định bên trái của badge | | classCircle | string | libs-ui-font-h6r | CSS class cho vòng tròn badge | | ignoreStopPropagationEvent | boolean | true | Bỏ qua việc lan truyền sự kiện khi nhấp vào badge |

Outputs

Thư viện không có Outputs.

Interfaces

IBadge

export interface IBadge {
  mode?: TYPE_BADGE_MODE;
  count?: number;
  maxCount?: number;
  classCircle?: string;
}

Định nghĩa cấu hình badge (inputs).

TYPE_BADGE_MODE

export type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';

Định nghĩa các chế độ hiển thị badge.

IPopoverOverlay

interface IPopoverOverlay {
  content: string | TemplateRef<any>;
  width?: string;
  position?: string;
  zIndex?: number;
  offset?: { x?: number; y?: number };
}

Định nghĩa cấu hình cho popover hiển thị khi di chuột qua badge.