@libs-ui/components-modal

Component Modal mạnh mẽ và linh hoạt hỗ trợ hiển thị nội dung trên một lớp phủ, giúp tập trung sự chú ý của người dùng vào một tác vụ cụ thể.

Giới thiệu

LibsUiComponentsModalComponent là một standalone component cung cấp giải pháp hiển thị modal chuyên nghiệp với các tính năng:

• ✅ Đa dạng Mode: Hỗ trợ hiển thị ở giữa màn hình (center) hoặc trượt từ bên phải (offset-right).
• ✅ Cấu trúc linh hoạt: Tích hợp sẵn Header, Body, Footer với khả năng tùy biến nội dung cao qua cả @Input và content projection.
• ✅ Quản lý trạng thái: Hỗ trợ đóng modal qua phím Escape, backdrop, hoặc các nút điều khiển.
• ✅ Signals Ready: Sử dụng Angular Signals cho việc quản lý hiển thị và cấu hình.
• ✅ Hiệu ứng mượt mà: Tích hợp các animation chuyển cảnh hiện đại.

Khi nào sử dụng

• Khi cần xác nhận một hành động quan trọng từ người dùng (Confirm dialog).
• Khi hiển thị form nhập liệu hoặc chi tiết thông tin mà không muốn rời khỏi trang hiện tại.
• Khi cần thông báo kết quả thao tác (Success/Error/Warning messages).
• Khi hiển thị các tài liệu, hướng dẫn hoặc nội dung phụ trợ.

Cài đặt

# npm
npm install @libs-ui/components-modal

# yarn
yarn add @libs-ui/components-modal

Import

import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';

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

Ví dụ

Basic Modal (Center)

<libs_ui-components-modal
  [(show)]="isVisible"
  mode="center"
  title="Tiêu đề Modal"
  [bodyConfig]="{
    lines: [{ text: 'Nội dung thông báo đơn giản ở đây.' }]
  }"
  (outEvent)="onModalEvent($event)"></libs_ui-components-modal>

Advanced (Offset Right with Custom Content)

<libs_ui-components-modal
  [(show)]="isDetailOpen"
  mode="offset-right"
  width="600px"
  title="Chi tiết đơn hàng"
  (outEvent)="handlerEvent($event)">
  <div class="libs-ui-modal-body-custom p-4">
    <!-- Nội dung phức tạp của bạn ở đây -->
    <app-order-detail [data]="currentOrder"></app-order-detail>
  </div>

  <div class="libs-ui-modal-footer-custom px-4 py-3 flex justify-end gap-2">
    <button (click)="isDetailOpen = false">Đóng</button>
    <button (click)="save()">Lưu thay đổi</button>
  </div>
</libs_ui-components-modal>

API

libs_ui-components-modal

Inputs

| Property | Type | Default | Description | | ---------------------------- | ---------------------------- | ---------------- | ----------------------------------------------------------- | | [(show)] | boolean | true | Điều khiển trạng thái hiển thị của modal (Two-way binding). | | [mode] | 'center' \| 'offset-right' | 'offset-right' | Chế độ hiển thị của modal. | | [width] | string | undefined | Chiều rộng của modal (ví dụ: '500px', '50%'). | | [height] | string | undefined | Chiều cao của modal. | | [title] | string | '' | Tiêu đề hiển thị trên header. | | [zIndex] | number | 1200 | Thứ tự hiển thị lớp phủ. | | [isFullScreen] | boolean | false | Bật chế độ hiển thị toàn màn hình. | | [disable] | boolean | false | Vô hiệu hóa các tương tác trong modal. | | [headerConfig] | IModalHeaderConfig | {} | Cấu hình chi tiết cho phần Header. | | [bodyConfig] | IModalBodyConfig | {} | Cấu hình nội dung mặc định phần Body. | | [footerConfig] | IModalFooterConfig | {} | Cấu hình phần Footer. | | [buttonsFooter] | Array<IButton> | undefined | Danh sách các nút ở Footer (nếu dùng mặc định). | | [escapeKeyboardCloseModal] | boolean | false | Cho phép đóng modal khi nhấn phím Escape. |

Outputs

| Property | Type | Description | | ---------------------- | -------------------------------------- | ---------------------------------------------------------------------------------- | | (outEvent) | EventEmitter<TYPE_MODAL_EVENT> | Phát ra các sự kiện khi người dùng tương tác (close, back, agree, cancel). | | (outScrollContent) | EventEmitter<Event> | Phát ra khi người dùng cuộn nội dung bên trong modal. | | (outFunctionControl) | EventEmitter<IModalFunctionsControl> | Cung cấp bộ hàm điều khiển modal từ bên ngoài. |

Methods (via Controls)

| Method | Parameters | Description | | ------------------------ | ---------- | -------------------------------------- | | show() | - | Mở hiển thị modal. | | hide() | - | Đóng ẩn modal. | | setStateDisable(state) | boolean | Cập nhật trạng thái disable của modal. |

Types & Interfaces

export interface IModalHeaderConfig {
  hasBackButton?: boolean;
  removeButtonClose?: boolean;
  hidden?: boolean;
  classTitle?: string;
  // ...
}

export interface IModalBodyConfig {
  lines?: Array<{ text: string; class?: string }>;
  iconType?: 'warning' | 'success' | 'fail' | 'information';
  // ...
}

Công nghệ

| Technology | Purpose | | --------------- | --------------------------------------------- | | Angular 18+ | Framework chính | | Angular Signals | Quản lý state reactive (model, input, signal) | | RxJS | Xử lý sự kiện (timer, scroll, keyup) | | Standard CSS | Hệ thống layout và animation |

License

MIT