Buttons Status Component

Version: 0.2.355-14

Component hiển thị status dạng pill, hỗ trợ icon trái/phải, translate label và tuỳ biến màu theo type hoặc otherConfig.

Giới thiệu

LibsUiComponentsButtonsStatusComponent là standalone Angular component để hiển thị trạng thái ngắn gọn (pill/badge) trong UI. Component nhận một object cấu hình config để quyết định label, type màu, icon và popover cho icon.

Tính năng

• ✅ Hiển thị status dạng pill gọn nhẹ
• ✅ Hỗ trợ nhiều type màu: blue/green/red/orange/yellow/cyan/purple/brown
• ✅ Tuỳ biến màu với type other + otherConfig
• ✅ Hỗ trợ icon trái/phải qua classIconLeft / classIconRight
• ✅ Hỗ trợ popover cho icon (thông qua IPopover)
• ✅ Translate label qua @ngx-translate/core
• ✅ OnPush Change Detection
• ✅ Angular Signals

Cài đặt

npm install @libs-ui/components-buttons-status

Import

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: '',
})
export class ExampleComponent {}

Cách sử dụng

1. Ví dụ inline template

<libs_ui-components-buttons-status
  [config]="statusConfig"
/>

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: `<libs_ui-components-buttons-status [config]="statusConfig" />`,
})
export class InlineExampleComponent {
  readonly statusConfig: IButtonStatus = {
    label: 'Đang hoạt động',
    type: 'blue',
  };
}

2. Ví dụ với file HTML riêng

example.component.html

<libs_ui-components-buttons-status [config]="config" />

example.component.ts

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  templateUrl: './example.component.html',
})
export class HtmlFileExampleComponent {
  readonly config: IButtonStatus = {
    label: 'Custom',
    type: 'other',
    otherConfig: {
      color: '#0ea5e9',
      background: '#e0f2fe',
    },
    classIconLeft: 'libs-ui-icon-info-circle',
    classIconRight: 'libs-ui-icon-chevron-right',
  };
}

Công nghệ

| Technology | Version | Purpose | |------------|---------|---------| | Angular | 18+ | Framework | | Angular Signals | - | State management | | TailwindCSS | 3.x | Styling (demo) | | OnPush | - | Change Detection | | ngx-translate | 15+ | Translate label |

API

libs_ui-components-buttons-status

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | [config] | IButtonStatus | required | Cấu hình hiển thị status: label/type/icon/popover/classes... |

Outputs

Component này hiện không có outputs public.

Types & Interfaces

export interface IButtonStatus {
  label?: string;
  type: TYPE_BUTTON_STATUS;
  otherConfig?: {
    color: string;
    background?: string;
  };
  classInclude?: string;
  classLabelInclude?: string;
  classIconLeft?: string;
  popoverIconLeft?: IPopover;
  classIconRight?: string;
  popoverIconRight?: IPopover;
}

export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';

Mô tả Types

• IButtonStatus: Interface cấu hình status: label, type, tuỳ biến màu (otherConfig) và icon/popover.
• TYPE_BUTTON_STATUS: Danh sách type status có sẵn. Dùng other + otherConfig khi cần màu tuỳ biến.

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/buttons/status