@libs-ui/components-buttons-button

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ị).