@libs-ui/components-popover

Component hiển thị nội dung nổi (popover/tooltip) gắn liền với một phần tử gốc, hỗ trợ nhiều hướng và chế độ kích hoạt.

Giới thiệu

Bộ công cụ Popover cung cấp giải pháp hiển thị thông tin ngữ cảnh linh hoạt. Bạn có thể sử dụng nó dưới dạng Directive để tiết kiệm DOM hoặc Component Selector khi cần bọc nhiều phần tử phức tạp.

Tính năng

• ✅ Linh hoạt cách dùng: Hỗ trợ cả Directive và Component Selector.
• ✅ Định vị thông minh: Tự động tính toán hướng để không bị tràn khung nhìn (viewport).
• ✅ Template Support: Hỗ trợ hiển thị nội dung từ string đơn giản đến ng-template phức tạp.
• ✅ Event Handling: Quản lý tốt các sự kiện hover, click và click-outside.
• ✅ Customizable: Dễ dàng tùy chỉnh chiều rộng, class CSS và hướng hiển thị.
• ✅ OnPush Change Detection
• ✅ Angular Signals

Khi nào sử dụng

• Hiển thị thông tin bổ sung (Tooltips) khi di chuột qua phần tử.
• Hiển thị menu hoặc nội dung chi tiết khi nhấn vào nút.
• Thông báo trạng thái hoặc hướng dẫn người dùng tại chỗ.

Cài đặt

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

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

Import

import { LibsUiComponentsPopoverModule } from '@libs-ui/components-popover';

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

Ví dụ

Directive (Sử dụng phổ biến)

<div
  LibsUiComponentsPopoverDirective
  [config]="{ content: 'Nội dung thông báo' }">
  Hover me
</div>

Component Selector

<libs_ui-components-popover [config]="{ content: 'Nội dung thông báo', direction: 'top' }">
  <button>Action</button>
</libs_ui-components-popover>

API

LibsUiComponentsPopoverDirective / LibsUiComponentsPopoverComponent

Inputs

| Property | Type | Default | Description | | ------------------------------------ | ------------------------------ | ------------ | -------------------------------------------------------- | | [config] | IPopoverConfig | Bắt buộc | Cấu hình nội dung, hướng và kích thước của popover. | | [mode] | 'hover' \| 'click' \| 'none' | 'hover' | Chế độ kích hoạt hiển thị. | | [ignoreCursorPointerModeLikeClick] | boolean | false | Bỏ qua việc đổi cursor thành pointer trong chế độ click. | | [ignoreStopPropagationEvent] | boolean | false | Cho phép sự kiện click lan truyền ra lớp cha. | | [initEventInElementRefCustom] | ElementRef | undefined | Gắn sự kiện vào một element khác thay vì host element. |

Outputs

| Property | Type | Description | | --------------- | --------- | --------------------------------------- | | (outExpanded) | boolean | Phát ra trạng thái đóng/mở của popover. |

Types & Interfaces

export interface IPopoverConfig {
  content?: string;
  template?: TemplateRef<any>;
  direction?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  width?: number;
  classCustom?: string;
  context?: any;
}

Styling

CSS Classes

| Class | Description | | ---------------------------- | ----------------------------------- | | .libs-ui-popover-container | Lớp bao ngoài của nội dung popover. | | .libs-ui-popover-arrow | Mũi tên chỉ hướng của popover. |

Công nghệ

| Technology | Version | Purpose | | --------------- | ------- | ------------------ | | Angular | 18+ | Framework | | CDK Overlay | 18+ | Positioning engine | | Angular Signals | - | State management | | TailwindCSS | 3.x | Styling |

Demo

npx nx serve core-ui

Truy cập: http://localhost:4200/popover

Unit Tests

# Chạy tests
npx nx test components-popover

# Coverage
npx nx test components-popover --coverage

License

MIT