@libs-ui/components-buttons-button

Component Button đa năng với nhiều kiểu dáng, kích thước và tích hợp popover.

Giới thiệu

LibsUiComponentsButtonsButtonComponent là một standalone Angular component được thiết kế để hiển thị các nút bấm với nhiều kiểu dáng (primary, secondary, outline, danger...), kích thước (large, medium, small, smaller) và hỗ trợ tích hợp popover, spinner loading, icon trái/phải.

Tính năng

• ✅ Hỗ trợ nhiều kiểu button (primary, secondary, outline, danger, link...)
• ✅ 4 kích thước: large, medium, small, smaller
• ✅ Tích hợp popover (hover/click)
• ✅ Loading state với spinner
• ✅ Icon trái/phải hoặc icon-only mode
• ✅ Custom colors với buttonCustom
• ✅ Disable state
• ✅ Angular Signals cho tính phản hồi cao
• ✅ OnPush Change Detection tối ưu hiệu năng

Khi nào sử dụng

• Khi cần một nút bấm để kích hoạt hành động (submit form, mở dialog, navigate...)
• Khi cần hiển thị trạng thái loading trong khi xử lý async operation
• Khi cần button với popover tooltip hoặc menu dropdown
• Khi cần button với icon hoặc chỉ hiển thị icon
• Phù hợp cho các action buttons, form buttons, navigation buttons

Cài đặt

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

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

Import

import { LibsUiComponentsButtonsButtonComponent, TYPE_BUTTON, TYPE_SIZE_BUTTON } from '@libs-ui/components-buttons-button';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsButtonComponent],
  // ...
})
export class YourComponent {}

Ví dụ

Basic

<libs_ui-components-buttons-button
  label="Click me"
  (outClick)="handleClick($event)" />

With Icon

<libs_ui-components-buttons-button
  type="button-primary"
  label="Add Item"
  [classIconLeft]="'libs-ui-icon-add'"
  (outClick)="handleClick($event)" />

Different Types

<!-- Primary -->
<libs_ui-components-buttons-button
  type="button-primary"
  label="Primary" />

<!-- Secondary -->
<libs_ui-components-buttons-button
  type="button-secondary"
  label="Secondary" />

<!-- Danger -->
<libs_ui-components-buttons-button
  type="button-danger-high"
  label="Delete" />

<!-- Link style -->
<libs_ui-components-buttons-button
  type="button-link-primary"
  label="Learn more" />

Different Sizes

<libs_ui-components-buttons-button
  [sizeButton]="'large'"
  label="Large Button" />

<libs_ui-components-buttons-button
  [sizeButton]="'medium'"
  label="Medium Button" />

<libs_ui-components-buttons-button
  [sizeButton]="'small'"
  label="Small Button" />

<libs_ui-components-buttons-button
  [sizeButton]="'smaller'"
  label="Smaller Button" />

Loading State

<libs_ui-components-buttons-button
  label="Save"
  [isPending]="isLoading"
  (outClick)="handleSave($event)" />

Icon Only

<libs_ui-components-buttons-button
  [classIconLeft]="'libs-ui-icon-settings'"
  [iconOnlyType]="true"
  (outClick)="openSettings($event)" />

With Popover

<libs_ui-components-buttons-button
  label="Hover me"
  [popover]="{
    type: 'text',
    mode: 'hover',
    config: {
      content: 'This is a tooltip',
      width: 200
    }
  }" />

Custom Color

<libs_ui-components-buttons-button
  type="button-custom"
  label="Custom"
  [buttonCustom]="{
    rootColor: '#ff6b6b',
    configStepColor: {
      background: 500,
      color: -500,
      background_hover: 600
    }
  }" />

API

libs_ui-components-buttons-button

Inputs

| Property | Type | Default | Description | | ------------------------------------- | -------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------- | | [buttonCustom] | IColorButton | undefined | Cấu hình màu custom (bắt buộc khi type là button-custom) | | [classIconLeft] | string | '' | Class của icon bên trái | | [classIconRight] | string | '' | Class của icon bên phải | | [classInclude] | string | '' | Class CSS bổ sung cho button | | [classLabel] | string | '' | Class CSS cho label | | [disable] | boolean | false | Disable button | | [flagMouse] | IFlagMouse | {isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false} | Trạng thái con trỏ chuột cho popover | | [iconOnlyType] | boolean | false | Chỉ hiển thị icon, ẩn label | | [ignoreFocusWhenInputTab] | boolean | undefined | Bỏ qua focus khi bấm TAB | | [ignorePointerEvent] | boolean | undefined | Bỏ qua pointer events | | [ignoreSetClickWhenShowPopover] | boolean | undefined | Không set click state khi show popover | | [ignoreStopPropagationEvent] | boolean | true | Cho phép event propagation | | [imageLeft] | {src: string, classInclude?: string} | undefined | Hình ảnh bên trái button | | [isActive] | boolean | undefined | Trạng thái active của button | | [isHandlerEnterDocumentClickButton] | boolean | undefined | Xử lý Enter key để click button | | [isPending] | boolean | undefined | Hiển thị spinner loading | | [label] | string | ' ' | Label của button | | [popover] | IPopover | {} | Cấu hình popover | | [sizeButton] | TYPE_SIZE_BUTTON | 'medium' | Kích thước button: large, medium, small, smaller | | [styleButton] | Record<string, any> | undefined | Inline styles cho button | | [styleIconLeft] | Record<string, any> | undefined | Inline styles cho icon trái | | [type] | TYPE_BUTTON | 'button-primary' | Kiểu button (màu sắc, style) | | [widthLabelPopover] | number | undefined | Chiều rộng popover của label | | [zIndex] | number | 10 | Z-index của popover |

Outputs

| Property | Type | Description | | ----------------------- | ------------------------------ | ------------------------------------ | | (outClick) | Event | Emit khi button được click | | (outFunctionsControl) | IPopoverFunctionControlEvent | Emit functions để điều khiển popover | | (outPopoverEvent) | TYPE_POPOVER_EVENT | Emit events từ popover |

Public Methods

| Method | Description | | ------------------ | --------------------------------------- | | FunctionsControl | Getter để lấy popover control functions |

Types & Interfaces

/**
 * Các kiểu button có sẵn
 */
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;

/**
 * Kích thước button
 */
export type TYPE_SIZE_BUTTON = 'large' | 'medium' | 'small' | 'smaller';

/**
 * Interface cho button config
 */
export interface IButton {
  key?: string;
  type?: TYPE_BUTTON;
  sizeButton?: TYPE_SIZE_BUTTON;
  iconOnlyType?: boolean;
  label?: string;
  disable?: boolean;
  classInclude?: string;
  classIconLeft?: string;
  classIconRight?: string;
  classLabel?: string;
  popover?: IPopover;
  ignoreStopPropagationEvent?: boolean;
  zIndex?: number;
  isPending?: boolean;
  action?: (data?: any) => Promise<void>;
  styleIconLeft?: Record<string, any>;
  styleButton?: Record<string, any>;
  buttonCustom?: IColorButton;
}

/**
 * Trạng thái chuột cho popover
 */
export interface IFlagMouse {
  isMouseEnter: boolean;
  isMouseEnterContent: boolean;
  isContainerHasScroll?: boolean;
}

Công nghệ

| Technology | Version | Purpose | | --------------- | ------- | ---------------- | | Angular | 18+ | Framework | | Angular Signals | - | State management | | TailwindCSS | 3.x | Styling | | OnPush | - | Change Detection |

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/buttons/button

Unit Tests

# Chạy tests
npx nx test components-buttons-button

# Coverage
npx nx test components-buttons-button --coverage

# Watch mode
npx nx test components-buttons-button --watch

License

MIT