@libs-ui/components-pages-template-full-screen

Khung layout chuẩn cho các trang hiển thị toàn màn hình (Full Screen), tích hợp header với các action linh hoạt.

Giới thiệu

LibsUiComponentsPagesTemplateFullScreenComponent là một standalone Angular component cung cấp cấu trúc layout cho các module cần không gian hiển thị toàn màn hình như: Tạo mới đối tượng phức tạp, Workflow editor, hoặc các trang báo cáo chuyên sâu.

Tính năng

• ✅ Header linh hoạt: Hỗ trợ 3 phân vùng (Trái, Giữa, Phải).
• ✅ Đa dạng Action: Tích hợp sẵn Button, Switch, Trạng thái (Status), Label và Dropdown menu trên header.
• ✅ Tùy biến cao: Hỗ trợ Content Projection cho nội dung chính và TemplateRef cho các vùng trên header.
• ✅ Giao tiếp Micro: Tự động gửi message "open/close" và cập nhật trạng thái hoạt động tới ứng dụng cha.
• ✅ Angular Signals: Tương thích hoàn toàn với Angular 18 Signals.

Khi nào sử dụng

• Khi cần không gian hiển thị tối đa cho người dùng (ví dụ: màn hình cấu hình workflow, chỉnh sửa ảnh/video).
• Khi trang có cấu trúc header phức tạp với nhiều nút chức năng điều hướng và thao tác nhanh.
• Khi cần một màn hình "Modal-like" nhưng chiếm trọn viewport.

Cài đặt

# npm
npm install @libs-ui/components-pages-template-full-screen

# yarn
yarn add @libs-ui/components-pages-template-full-screen

Import

import { LibsUiComponentsPagesTemplateFullScreenComponent } from '@libs-ui/components-pages-template-full-screen';

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

Ví dụ

Basic

<libs_ui-components-pages_template_full_screen
  [title]="'Cấu hình chiến dịch mới'"
  [labelLeft]="'Quay lại'"
  (outClose)="onClose()">
  <div class="content">
    <!-- Nội dung trang của bạn -->
  </div>
</libs_ui-components-pages_template_full_screen>

With Header Actions

<libs_ui-components-pages_template_full_screen
  [title]="'Chỉnh sửa nội dung'"
  [buttonRight]="[
    { key: 'switch', active: true, classInclude: 'mr-2' },
    { key: 'button', label: 'Lưu nháp', type: 'button-secondary' },
    { key: 'button', label: 'Xuất bản', type: 'button-primary' }
  ]"
  (outClickButton)="onAction($event)">
  <p>Nội dung soạn thảo...</p>
</libs_ui-components-pages_template_full_screen>

API

libs_ui-components-pages_template_full_screen

Inputs

| Property | Type | Default | Description | | ---------------------------- | ---------------------------------- | --------------------- | ------------------------------------------------------- | | [title] | string | undefined | Tiêu đề hiển thị ở giữa header. | | [labelLeft] | string | 'i18n_back_to_list' | Nhãn cho nút quay lại bên trái. | | [buttonCenter] | IPagesTemplateFullScreenButton[] | undefined | Danh sách các nút hiển thị ở giữa header (cạnh title). | | [buttonRight] | IPagesTemplateFullScreenButton[] | undefined | Danh sách các nút hiển thị bên phải header. | | [hasEdit] | boolean | false | Hiển thị icon edit cạnh tiêu đề. | | [menuDropDownConfigs] | IDropdown | undefined | Cấu hình cho menu "Thanh thao tác khác" (ba chấm dọc). | | [zIndex] | number | 1000 | Thứ tự hiển thị của lớp overlay. | | [ignoreClosePageFullEvent] | boolean | false | Nếu true, sẽ không gửi message communicate tới app cha. | | [ignoreBackgroundColor] | boolean | false | Nếu true, nền sẽ trong suốt (mặc định #f2f5f7). | | [disable] | boolean | false | Vô hiệu hóa toàn bộ action trên header. | | [leftTemplate] | TemplateRef<any> | undefined | Custom template cho vùng bên trái header. | | [centerTemplate] | TemplateRef<any> | undefined | Custom template cho vùng giữa header. | | [templateRight] | TemplateRef<any> | undefined | Custom template cho vùng bên phải header. | | [classHeaderInclude] | string | undefined | Custom class cho header. | | [classBodyInclude] | string | undefined | Custom class cho thân trang. | | [divideClassHeader] | object | undefined | Cấu hình class cho các vùng phân chia trên header. |

Outputs

| Property | Type | Description | | --------------------------- | -------------------------------- | ----------------------------------------------------------------------------- | | (outClose) | void | Phát ra khi click nút quay lại/đóng. | | (outEdit) | void | Phát ra khi click icon edit cạnh tiêu đề. | | (outSelectedMenuDropdown) | IEmitSelectKey | Phát ra khi chọn item từ menu dropdown phụ. | | (outClickButton) | IPagesTemplateFullScreenButton | Phát ra khi click vào bất kỳ nút nào trong buttonCenter hoặc buttonRight. |

Types & Interfaces

export type IPagesTemplateFullScreenButtonKey = 'button' | 'button-status' | 'switch' | 'label' | 'line-space' | 'button-dropdown';

export interface IPagesTemplateFullScreenButton extends IButton {
  key: IPagesTemplateFullScreenButtonKey;
  classInclude?: string;
  disable?: boolean;
  action?: (event?: ISwitchEvent) => Promise<void>;
  configButtonStatus?: IButtonStatus;
  active?: boolean;
  labelConfig?: ILabel;
}

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:4200/page-template/full-screen