Button

Giới thiệu

@libs-ui/components-buttons-button là một component Button linh hoạt dùng cho ứng dụng Angular. Component này hỗ trợ:

• Nhiều kiểu button (primary, secondary, third, outline, outline-green, link, custom)
• Nhiều kích thước (large, medium, small, smaller)
• Trạng thái loading (pending) và disabled
• Hiển thị popover thông tin khi hover hoặc focus
• Xuất ra các sự kiện click và popover control

Tính năng

• Tùy chọn kiểu hiển thị: button-primary, button-secondary, button-third, button-outline, button-outline-green, button-link, button-custom
• Tùy chọn kích thước: large | medium | small | smaller
• Trạng thái loading dễ dàng với isPending
• Vô hiệu hóa button với disable
• Hỗ trợ popover nội dung tùy chỉnh

Cài đặt

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

hoặc

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

Sử dụng

Inline Template

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsButtonComponent],
  template: `
    <libs_ui-components-buttons-button
      [type]="'button-primary'"
      [label]="'Click me'"
      (outClick)="onClick()"></libs_ui-components-buttons-button>
  `,
})
export class ExampleComponent {
  onClick() {
    console.log('Clicked');
  }
}

File HTML riêng

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsButtonComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {}

<libs_ui-components-buttons-button
  [type]="'button-secondary'"
  [label]="'Submit'"></libs_ui-components-buttons-button>

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ả | | --------------------------------- | ---------------------------------------- | ---------------- | ---------------------------------------------------------------------- | | type | TYPE_BUTTON | button-primary | Kiểu style của nút (ví dụ: button-primary, button-secondary, ...). | | sizeButton | TYPE_SIZE_BUTTON | medium | Kích thước của nút (large, medium, small, smaller). | | label | string | ' ' | Nội dung text hiển thị trên nút. | | disable | boolean | false | Nếu true: vô hiệu hóa nút, không cho tương tác. | | isPending | boolean | false | Nếu true: hiển thị trạng thái loading và vô hiệu hóa nút. | | popover | IPopover | {} | Cấu hình chi tiết cho popover (nội dung, vị trí, chế độ hiển thị). | | buttonCustom | IColorButton | undefined | Cấu hình màu custom khi type là button-custom hoặc button-link-custom. | | imageLeft | { src: string; classInclude?: string } | undefined | Thêm image/icon bên trái nút. | | classInclude | string | '' | Class CSS thêm cho container nút. | | classIconLeft | string | '' | Class CSS thêm cho icon bên trái. | | classIconRight | string | '' | Class CSS thêm cho icon bên phải. | | classLabel | string | '' | Class CSS thêm cho nhãn (label). | | iconOnlyType | boolean | false | Chỉ hiển thị icon, không hiển thị nhãn. | | ignoreStopPropagationEvent | boolean | true | Cho phép ngăn chặn hoặc không propagation sự kiện click. | | zIndex | number | 10 | Giá trị z-index của popover. | | widthLabelPopover | number | undefined | Chiều rộng của label popover (px). | | styleIconLeft | Record<string, any> | undefined | Style inline cho icon trái. | | styleButton | Record<string, any> | undefined | Style inline cho button. | | ignoreFocusWhenInputTab | boolean | undefined | Bỏ qua focus khi nhấn Tab. | | ignoreSetClickWhenShowPopover | boolean | undefined | Bỏ qua set click khi show popover. | | ignorePointerEvent | boolean | undefined | Bỏ qua pointer events. | | isActive | boolean | undefined | Trạng thái active của button. | | isHandlerEnterDocumentClickButton | boolean | undefined | Cho phép xử lý event Enter trên document. |

Outputs

| Tên | Kiểu | Mô tả | | ------------------- | ------------------------------------------------- | ---------------------------------------------------- | | outClick | (event: Event) => void | Phát ra khi người dùng click vào nút. | | outPopoverEvent | (event: TYPE_POPOVER_EVENT) => void | Phát ra các sự kiện của popover (show, hide, click). | | outFunctionsControl | (control: IPopoverFunctionControlEvent) => void | Cung cấp API để điều khiển popover. |

Interfaces

TYPE_BUTTON

export type TYPE_BUTTON =
  | 'button-primary'
  | 'button-primary-revert'
  | 'button-secondary'
  | 'button-secondary-red'
  | 'button-outline-secondary'
  | 'button-third'
  | 'button-outline'
  | 'button-danger-high'
  | 'button-outline-hover-danger'
  | 'button-third-hover-danger'
  | 'button-danger-low'
  | 'button-green'
  | 'button-violet'
  | 'button-secondary-green'
  | 'button-outline-green'
  | 'button-custom'
  | 'button-link-primary'
  | 'button-link-third'
  | 'button-link-danger-high'
  | 'button-link-danger-low'
  | 'button-link-green'
  | 'button-link-violet'
  | 'button-link-custom'
  | string;

Mô tả: Các giá trị style của nút được hỗ trợ.

TYPE_SIZE_BUTTON

export type TYPE_SIZE_BUTTON = 'large' | 'medium' | 'small' | 'smaller';

Mô tả: Các giá trị kích thước của nút được hỗ trợ.

IPopover

export interface IPopover {
  type?: TYPE_POPOVER_TYPE;
  mode?: TYPE_POPOVER_MODE;
  dataView?: string;
  config?: IPopoverOverlay;
  classInclude?: string;
  ignoreShowPopover?: boolean;
}

Mô tả: Cấu hình chi tiết cho popover (nội dung, vị trí, chế độ hiển thị).