@libs-ui/components-buttons-status

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.