@libs-ui/components-badge

Component hiển thị số lượng/đếm (badge) với nhiều chế độ định dạng cho Angular.

Giới thiệu

LibsUiComponentsBadgeComponent là một standalone Angular component để hiển thị số lượng với các tính năng:

• ✅ Nhiều chế độ hiển thị (x, 0x, x+, +x, k)
• ✅ Rút gọn số lớn tự động (1K, 1.5K, 1M)
• ✅ Hiển thị dạng "99+" khi vượt giới hạn
• ✅ Hỗ trợ trạng thái active với màu sắc khác
• ✅ Tích hợp Popover tooltip
• ✅ OnPush Change Detection cho hiệu năng cao
• ✅ Sử dụng Angular Signals

Cài đặt

# npm
npm install @libs-ui/components-badge

# yarn
yarn add @libs-ui/components-badge

Sử dụng

Import Component

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsBadgeComponent],
  template: `
    <div class="flex items-center gap-2">
      <span>Tin nhắn</span>
      <libs_ui-components-badge
        [count]="messageCount"
        [mode]="'0x'"
        [active]="hasUnread"
      />
    </div>
  `
})
export class ExampleComponent {
  messageCount = 5;
  hasUnread = true;
}

Các Mode hiển thị

| Mode | Count = 0 | Count = 5 | Count = 15 | Count = 100 | Count > maxCount | |------|-----------|-----------|------------|-------------|------------------| | x | 0 | 5 | 15 | 100 | - | | 0x | 00 | 05 | 15 | 100 | - | | x+ | 00 | 05 | 15 | 100 | 99+ | | +x | +00 | +05 | +15 | +100 | - | | k | - | - | - | - | 1K, 1.5M |

Ví dụ với mode 'x+'

<!-- Hiển thị "99+" khi count > maxCount -->
<libs_ui-components-badge
  [count]="150"
  [mode]="'x+'"
  [maxCount]="99"
/>
<!-- Output: 99+ -->

Ví dụ với mode 'k' (rút gọn)

<!-- Hiển thị số rút gọn -->
<libs_ui-components-badge [count]="1500" [mode]="'k'" />
<!-- Output: 1,5K -->

<libs_ui-components-badge [count]="1500000" [mode]="'k'" />
<!-- Output: 1,5M -->

Trạng thái Active

<!-- Badge bình thường -->
<libs_ui-components-badge [count]="5" />

<!-- Badge active (màu xanh) -->
<libs_ui-components-badge [count]="5" [active]="true" />

API Reference

Inputs

| Tên | Kiểu | Mặc định | Mô tả | |-----|------|----------|-------| | count | number | 0 | Số lượng hiển thị trên badge | | mode | TYPE_BADGE_MODE | undefined | Chế độ định dạng: 'x', '0x', 'x+', '+x', 'k' | | maxCount | number | MAX_SAFE_INTEGER | Giới hạn tối đa, vượt qua sẽ hiển thị "maxCount+" (với mode 'x+') | | active | boolean | false | Trạng thái active, thay đổi màu sắc badge | | classCircle | string | 'libs-ui-font-h6r' | Class CSS tùy chỉnh cho badge | | ignoreMarginDefault | boolean | false | Bỏ margin-left mặc định (8px) | | popoverConfig | IPopoverOverlay | undefined | Cấu hình cho popover tooltip | | ignoreStopPropagationEvent | boolean | true | Bỏ qua stopPropagation khi click |

Types

// Các mode hiển thị số
type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';

// Interface cho badge (dùng khi cần type cho object)
interface IBadge {
  mode?: TYPE_BADGE_MODE;
  count?: number;
  maxCount?: number;
  classCircle?: string;
}

Giải thích các Mode

| Mode | Mô tả | Ví dụ | |------|-------|-------| | x | Số thường, không có số 0 đằng trước | 0, 5, 15, 100 | | 0x | Có số 0 đằng trước nếu < 10 | 00, 05, 15, 100 | | x+ | Hiển thị "maxCount+" khi vượt giới hạn | 99+, 999+ | | +x | Thêm dấu + phía trước số | +00, +05, +15 | | k | Rút gọn hàng nghìn/triệu | 1,5K, 1,0M |

Styling

Badge có 2 trạng thái CSS:

// Normal state
.libs-ui-badge {
  background: #e6e7ea;
  color: #6a7383;
}

// Active state
.libs-ui-badge-active {
  background: var(--libs-ui-color-light-3, #f4f8ff);
  color: var(--libs-ui-color-default, #226ff5);
}

Bạn có thể override bằng CSS variables:

:root {
  --libs-ui-color-default: #your-primary-color;
  --libs-ui-color-light-3: #your-light-color;
}

Công nghệ sử dụng

• Angular 18+ - Standalone Components
• Angular Signals - Reactive state với computed()
• TailwindCSS - Utility classes
• OnPush - Change Detection Strategy

Demo

Demo có sẵn trong ứng dụng core-ui:

# Chạy demo app
npx nx serve core-ui

File demo: apps/core-ui/src/app/components/badge/badge.component.ts

Tính năng Demo

• 🎮 Interactive Demo: Điều chỉnh count, maxCount bằng slider
• 📊 Mode Comparison Table: So sánh tất cả modes với nhiều giá trị count
• 🔄 Active State Toggle: Bật/tắt trạng thái active
• 📋 API Reference: Bảng tham chiếu đầy đủ các inputs và types

Unit Tests

# Chạy tests
npx nx test badge

# Chạy tests với coverage
npx nx test badge --coverage

# Watch mode
npx nx test badge --watch

License

MIT