@libs-ui/components-pages-template-detail

Template trang chi tiết chuẩn Mobio UI, tích hợp đầy đủ header, navigation và các action phổ biến.

Giới thiệu

LibsUiComponentsPagesTemplateDetailComponent là một standalone Angular component cung cấp khung layout cho các trang chi tiết. Nó giúp chuẩn hóa giao diện và trải nghiệm người dùng (UX) cho các tác vụ như xem/sửa thông tin thực thể.

Tính năng

• ✅ Header chuẩn hóa: Tích hợp nút quay lại, tiêu đề và mô tả.
• ✅ Actions linh hoạt: Hỗ trợ nhiều loại nút (button, switch, dropdown, radio group) ở bên phải header.
• ✅ Layout tùy biến: Hỗ trợ chia tỉ lệ header (24/52/24) cho các trang cần hiển thị thông tin ở giữa.
• ✅ Scroll Overlay: Tích hợp sẵn directive xử lý cuộn nội dung mượt mà.
• ✅ Angular Signals: Sử dụng các tính năng mới nhất của Angular 18 (Input, Model).

Khi nào sử dụng

• Khi xây dựng trang chi tiết cho một thực thể (ví dụ: Chi tiết khách hàng, Chi tiết đơn hàng).
• Cần một header thống nhất có đầy đủ các nút chức năng (Lưu, Hủy, Thao tác khác).
• Phù hợp cho các layout yêu cầu sự tập trung vào nội dung chính nhưng vẫn cần truy cập nhanh các hành động quản lý.

Cài đặt

# npm
npm install @libs-ui/components-pages-template-detail

# yarn
yarn add @libs-ui/components-pages-template-detail

Import

import { LibsUiComponentsPagesTemplateDetailComponent } from '@libs-ui/components-pages-template-detail';

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

Ví dụ

Cấu hình cơ bản

<libs_ui-components-pages_template-detail
  [configTitle]="{
    config: { content: 'Chi tiết khách hàng' },
    isShowBackToListLabel: true
  }"
  [configRight]="[
    {
      key: 'button',
      configButton: { label: 'Lưu thay đổi', type: 'button-primary' }
    }
  ]"
  (outClose)="onBack()">
  <div class="p-6">
    <!-- Nội dung chi tiết ở đây -->
    <app-user-form></app-user-form>
  </div>
</libs_ui-components-pages_template-detail>

API

libs_ui-components-pages_template-detail

Inputs

| Property | Type | Default | Description | | ---------------------- | ---------------------------------------- | ----------- | -------------------------------------------------- | | [classIncludeBody] | string | undefined | Custom class cho phần thân trang. | | [classIncludeHeader] | string | undefined | Custom class cho phần header. | | [configCenter] | IPagesTemplateDetailConfigCenter | undefined | Cấu hình phần nội dung giữa header. | | [configRight] | Array<IPagesTemplateDetailConfigRight> | undefined | Danh sách các action group ở bên phải header. | | [configTitle] | IPagesTemplateDetailConfigTitle | undefined | Cấu hình tiêu đề, mô tả và nút quay lại. | | [disable] | boolean (model) | false | Trạng thái vô hiệu hóa toàn bộ action trên header. | | [isSplitHeaderRatio] | boolean | false | Bật tỉ lệ chia header 24/52/24. | | [zIndex] | number | 1000 | Thứ tự hiển thị lớp phủ. |

Outputs

| Property | Type | Description | | ----------------------------- | ------------------------------------------- | ---------------------------------------------------- | | (outClose) | EventEmitter<boolean> | Phát ra khi người dùng click nút quay lại hoặc đóng. | | (outFunctionControl) | EventEmitter<IPageDetailFunctionControl> | Cung cấp hàm điều khiển trạng thái component. | | (outScroll) | EventEmitter<Event> | Phát ra khi thực hiện cuộn trong trang. | | (outSelectedButtonDropdown) | EventEmitter<IEmitSelectKey> | Phát ra khi chọn item từ Button Dropdown. | | (outSelectedMenuDropdown) | EventEmitter<IEmitSelectKey \| undefined> | Phát ra khi chọn item từ Menu Dropdown. | | (outSelectedRadio) | EventEmitter<IRadioEvent> | Phát ra khi thay đổi giá trị Radio Group. | | (outStateDisable) | EventEmitter<boolean> | Phát ra khi trạng thái disable thay đổi. |

Types & Interfaces

export interface IPagesTemplateDetailConfigTitle extends IPopover {
  ignoreButtonBack?: boolean;
  isShowBackToListLabel?: boolean;
  configDescription?: {
    innerView?: string;
    config: IPopoverOverlay;
  };
}

export interface IPagesTemplateDetailConfigRight {
  key: 'button' | 'swicth' | 'radio-group' | 'button-dropdown' | 'menu-dropdown' | 'tooltip-button';
  configButton?: IButton;
  configSwicth?: ISwitch;
  configDropdown?: IDropdown;
  // ...
}

Công nghệ

| Technology | Purpose | | --------------- | ---------------------- | | Angular 18 | Framework chính | | Angular Signals | Quản lý state phản ứng | | Mobio UI Kit | Hệ thống design gốc | | SCSS | Styling chuyên biệt |

License

MIT