Button Tab

Giới thiệu

@libs-ui/components-buttons-tab là một component Tab cho Angular, cho phép hiển thị danh sách tabs, hỗ trợ trạng thái active và tuỳ chỉnh màu cho type "other".

Tính năng

• Hiển thị tabs dạng button theo danh sách đầu vào
• Two-way binding cho tab đang active (keySelected)
• Hỗ trợ vô hiệu hóa toàn bộ tabs (disable)
• Type other cho phép cấu hình màu chữ và nền riêng (otherConfig)
• Hỗ trợ hiển thị số lượng badge (count, maxCount, modeCount)

Cài đặt

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

hoặc

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

Sử dụng

Inline Template

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsTabComponent],
  template: `
    <libs_ui-components-buttons-tab
      [items]="tabs"
      [disable]="isDisabled"
      [(keySelected)]="selectedKey"
      [otherConfig]="otherConfig"
      (outKeySelected)="onSelect($event)"></libs_ui-components-buttons-tab>
  `,
})
export class ExampleComponent {
  tabs: IButtonTab[] = [
    { key: 'tab1', label: 'Tab 1', type: 'blue' },
    { key: 'tab2', label: 'Tab 2', type: 'red', count: 5 },
    { key: 'tab3', label: 'Tab 3', type: 'other' },
  ];
  isDisabled = false;
  selectedKey = 'tab1';
  otherConfig: IOtherConfig = { color: '#000000', background: '#ffffff' };

  onSelect(key: string) {
    console.log('Selected tab:', key);
  }
}

File HTML riêng

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsTabComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  tabs: IButtonTab[] = [
    /* ... */
  ];
  isDisabled = false;
  selectedKey = '';
  otherConfig: IOtherConfig = { color: '#000000', background: '#ffffff' };

  onSelect(key: string) {}
}

<libs_ui-components-buttons-tab
  [items]="tabs"
  [disable]="isDisabled"
  [(keySelected)]="selectedKey"
  [otherConfig]="otherConfig"
  (outKeySelected)="onSelect($event)"></libs_ui-components-buttons-tab>

Công nghệ sử dụng

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

API Reference

Inputs

| Tên | Kiểu | Mặc định | Mô tả | | ----------- | ------------------- | -------- | --------------------------------- | | items | Array<IButtonTab> | required | Danh sách cấu hình tabs | | disable | boolean | false | Vô hiệu hóa toàn bộ tabs | | keySelected | string | '' | Key của tab đang active (two-way) | | otherConfig | IOtherConfig | n/a | Cấu hình màu cho type 'other' |

Outputs

| Tên | Kiểu | Mô tả | | -------------- | -------- | -------------------------- | | outKeySelected | string | Emit key của tab được chọn |

Interfaces

IButtonTab

| Property | Type | Required | Description | | ---------- | ----------------- | -------- | ---------------------------------------------------------------------- | | key | string | yes | Định danh duy nhất của tab, dùng cho two-way binding. | | label | string | yes | Nội dung text hiển thị trên tab. | | type | TYPE_BUTTON_TAB | yes | Chủ đề màu của tab; giá trị mặc định hoặc tuỳ chỉnh qua otherConfig. | | count | number | no | Giá trị số (badge) hiển thị trên tab. | | modeCount | TYPE_BADGE_MODE | no | Chế độ hiển thị badge khi count vượt quá maxCount. | | maxCount | number | no | Số tối đa hiển thị trước khi chuyển sang định dạng modeCount. | | class | string | no | Các class CSS thêm cho container tab. | | classLabel | string | no | Các class CSS thêm cho label text. | | disable | boolean | no | Nếu true: vô hiệu hoá tương tác click cho tab này. | | data | any | no | Dữ liệu tuỳ ý gắn kèm với tab. |

IOtherConfig

| Property | Type | Required | Description | | ---------------- | -------- | -------- | ---------------------------------------------------------- | | color | string | yes | Màu chữ (label) cho tab đang active khi type là other. | | background | string | no | Màu nền cho tab đang active khi type là other. | | background_badge | string | no | Màu nền cho badge khi type là other. |

TYPE_BUTTON_TAB

| Value | Description | | -------- | -------------------------------------------------------- | | blue | Chủ đề màu xanh mặc định. | | green | Chủ đề màu xanh lá (thành công). | | red | Chủ đề màu đỏ (cảnh báo). | | orange | Chủ đề màu cam (cảnh báo). | | yellow | Chủ đề màu vàng (thông tin). | | cyan | Chủ đề màu xanh lam nhạt (phụ). | | purple | Chủ đề màu tím (nổi bật). | | brown | Chủ đề màu nâu (trung tính). | | other | Chủ đề tuỳ chỉnh; màu được định nghĩa qua otherConfig. | | string | Các tên chủ đề tuỳ chỉnh khác. |