Button Status

Giới thiệu

@libs-ui/components-buttons-status là một component hiển thị trạng thái dưới dạng button, hỗ trợ nhiều kiểu màu khác nhau và tuỳ chỉnh thông tin popover.

Tính năng

• Hiển thị nhãn và icon status (nếu cấu hình)
• Hỗ trợ nhiều kiểu màu trạng thái qua input type (blue, green, red, orange, yellow, cyan, purple, brown, other)
• Cho phép cấu hình màu và background riêng cho type other
• Hỗ trợ popover cho icon bên trái hoặc phải qua popoverIconLeft/popoverIconRight
• Tuỳ chỉnh CSS classes: classInclude, classLabelInclude, classIconLeft, classIconRight
• Kích thước tự động phù hợp với nội dung

Cài đặt

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

hoặc

yarn add @libs-ui/components-buttons-status

Sử dụng

Inline Template

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

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

File HTML riêng

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  statusConfig: IButtonStatus = { label: 'Đang chờ', type: 'yellow' };
}

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

Công nghệ sử dụng

• Angular 18 standalone component, Signals
• Tailwind CSS 3.x

API Reference

Inputs

| Tên | Kiểu | Mặc định | Mô tả | | ------ | --------------- | -------- | ------------------------------------------------------------- | | config | IButtonStatus | required | Thông tin cấu hình cho trạng thái (nhãn, màu, icon, popover). |

Outputs

Không có

Interfaces

IButtonStatus

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;
}

Mô tả:

• label: Nhãn hiển thị của trạng thái.
• type: Kiểu màu/trạng thái (TYPE_BUTTON_STATUS).
• otherConfig: Cấu hình màu chữ và nền khi type là other.
• classInclude: CSS class thêm cho container của status.
• classLabelInclude: CSS class thêm cho nhãn.
• classIconLeft: CSS class thêm cho icon bên trái.
• popoverIconLeft: Cấu hình popover cho icon bên trái.
• classIconRight: CSS class thêm cho icon bên phải.
• popoverIconRight: Cấu hình popover cho icon bên phải.

TYPE_BUTTON_STATUS

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

Mô tả:

• blue: Màu xanh dương (thông tin chung).
• green: Màu xanh lá cây (thành công).
• red: Màu đỏ (lỗi hoặc cảnh báo).
• orange: Màu cam (cảnh báo).
• yellow: Màu vàng (đang chờ, thông tin).
• cyan: Màu xanh da trời (thông tin phụ trợ).
• purple: Màu tím (nhấn mạnh, nổi bật).
• brown: Màu nâu (trung tính).
• other: Chủ đề tuỳ chỉnh; cấu hình qua otherConfig.