Button Group

Giới thiệu

@libs-ui/components-buttons-group là một component nhóm Button cho Angular, cho phép hiển thị nhiều nút theo hàng, hỗ trợ quản lý trạng thái active và disable cho toàn nhóm.

Tính năng

• Hiển thị danh sách nút theo hàng ngang
• Hỗ trợ two-way binding cho chỉ số nút đang active (indexActive)
• Emit sự kiện khi thay đổi nút active (outChange)
• Hỗ trợ disable toàn bộ nhóm nút
• Tích hợp popover control event (outFunctionsControl)

Cài đặt

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

hoặc

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

Sử dụng

Inline Template

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsGroupComponent } from '@libs-ui/components-buttons-group';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsGroupComponent],
  template: `
    <libs_ui-components-buttons-group
      [buttons]="buttons"
      [(indexActive)]="activeIndex"
      (outChange)="onChange($event)"></libs_ui-components-buttons-group>
  `,
})
export class ExampleComponent {
  buttons = [
    { key: '1', label: 'Option 1' },
    { key: '2', label: 'Option 2' },
    { key: '3', label: 'Option 3' },
  ];
  activeIndex = 0;
  onChange(button: any) {
    console.log('Changed:', button);
  }
}

File HTML riêng

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsGroupComponent } from '@libs-ui/components-buttons-group';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsGroupComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  buttons = [
    /* ... */
  ];
  activeIndex = 0;
  onChange(button: any) {}
}

<libs_ui-components-buttons-group
  [buttons]="buttons"
  [(indexActive)]="activeIndex"
  (outChange)="onChange($event)"></libs_ui-components-buttons-group>

Công nghệ sử dụng

• Angular 18 với standalone components và Signals
• Tailwind CSS 3.x (phong cách demo)

API Reference

Inputs

| Tên | Kiểu | Mặc định | Mô tả | | ----------- | ---------------- | -------- | --------------------------------------- | | buttons | Array<IButton> | required | Mảng các nút sẽ hiển thị trong nhóm. | | indexActive | number | 0 | Chỉ số của nút đang được chọn (từ 0). | | disable | boolean | false | Nếu true: vô hiệu hóa toàn bộ nhóm nút. |

Outputs

| Tên | Kiểu | Mô tả | | ------------------- | ------------------------------ | ----------------------------------- | | outChange | (button: IButton) => void | Trả về nút vừa được chọn. | | outFunctionsControl | IPopoverFunctionControlEvent | Cung cấp API để điều khiển popover. |

Interfaces

IButton

| Property | Type | Required | Description | | -------------- | ------------------ | -------- | ----------------------------------------------- | | key | string | no | Khóa định danh của nút (unique). | | type | TYPE_BUTTON | no | Kiểu giao diện của nút (primary, secondary...). | | sizeButton | TYPE_SIZE_BUTTON | no | Kích thước của nút (nhỏ, trung, lớn). | | iconOnlyType | boolean | no | Nếu true: chỉ hiện icon, không hiện nhãn. | | label | string | no | Văn bản hiển thị trên nút. | | disable | boolean | no | Vô hiệu hóa nút khi true. | | classInclude | string | no | Class CSS thêm cho container của nút. | | classIconLeft | string | no | Class CSS thêm cho icon bên trái. | | classIconRight | string | no | Class CSS thêm cho icon bên phải. | | classLabel | string | no | Class CSS thêm cho nhãn. | | popover | IPopover | no | Cấu hình popover cho nút (nếu cần). |

IPopoverFunctionControlEvent

| Property | Type | Required | Description | | -------- | ---- | -------- | --------------------------------------------------- | | ... | ... | ... | Xem @libs-ui/components-popover để biết chi tiết. |