Line Clamp Component

@libs-ui/components-line-clamp là một component hữu ích dùng để giới hạn số dòng hiển thị của một đoạn văn bản dài, cung cấp tính năng "Xem thêm" (View more) và "Thu gọn" (Collapse), cùng với hỗ trợ hiển thị Tooltip cho nội dung đầy đủ.

Tính năng nổi bật

• ✂️ Giới hạn dòng (Line Clamping): Trực tiếp giới hạn số dòng dựa trên maxHeight.
• 🔗 View More / Collapse: Tự động hiển thị nút điều khiển khi nội dung vượt quá giới hạn.
• 💬 Tooltip Support: Tích hợp sẵn Tooltip để người dùng xem nhanh nội dung đầy đủ khi hover mà không cần mở rộng.
• 🎨 Custom Styling: Dễ dàng tùy chỉnh class cho nội dung và các nút điều khiển thông qua ngClassObject.
• 🔒 Security: Hỗ trợ lọc XSS thông qua useXssFilter và hỗ trợ cả innerHTML lẫn innerText.
• 🌈 Gradient Effect: Tùy chọn hiển thị hiệu ứng mờ dần (gradient) ở cuối đoạn văn bản bị cắt.

Cài đặt

Sử dụng npm hoặc yarn để cài đặt:

npm install @libs-ui/components-line-clamp

Cách sử dụng

Import Module

import { LibsUiComponentsLineClampComponent } from '@libs-ui/components-line-clamp';

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

Ví dụ cơ bản (Giới hạn độ cao)

<libs_ui-components-line_clamp
  [content]="longText"
  [maxHeight]="48"
  [labelButtonViewMore]="'Xem thêm'"
  [labelButtonCollapse]="'Thu gọn'"></libs_ui-components-line_clamp>

Ví dụ có Tooltip và Gradient

<libs_ui-components-line_clamp
  [content]="htmlContent"
  [maxHeight]="60"
  [showTooltip]="true"
  [hasBackgroundGradient]="true"
  [maxWidthTooltip]="300"></libs_ui-components-line_clamp>

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :-------------------------------------- | :----------------------- | :----------------- | :------------------------------------------------------------ | | classClassIncludeButtonCollapseExpand | string | '!p-0' | Class CSS cho container nút collapse/expand. | | classClassLabelButtonCollapseExpand | string | libs-... | Class CSS cho nhãn nút collapse/expand. | | content | string | required | Nội dung văn bản hoặc HTML cần hiển thị. | | defaultIsCollapse | boolean | true | Mặc định thu gọn khi khởi tạo. | | directionTooltip | TYPE_POPOVER_DIRECTION | 'top' | Hướng hiển thị tooltip. | | hasBackgroundGradient | boolean | false | Hiển thị hiệu ứng mờ dần ở phía dưới khi bị cắt. | | ignoreShowButtonCollapse | boolean | undefined | Ẩn nút Thu gọn (chỉ hiện nút Xem thêm). | | ignoreShowButtonCollapseExpand | boolean | false | Ẩn hoàn toàn nút Xem thêm / Thu gọn. | | ignoreStopPropagationTooltipEvent | boolean | false | Ngăn chặn nổi bọt sự kiện tooltip. | | isInnerText | boolean | false | Nếu true, sẽ render dưới dạng innerText (không xử lý HTML). | | labelButtonCollapse | string | 'i18n_collapse' | Nhãn cho nút Thu gọn. | | labelButtonViewMore | string | 'i18n_view_more' | Nhãn cho nút Xem thêm. | | lengthLimitDisplay | number | 200 | Giới hạn số ký tự để tính toán cắt chuỗi ban đầu. | | maxHeight | number | required | Độ cao tối đa (px). Công thức: (line-height) * (số dòng). | | maxHeightTooltip | number | 150 | Chiều cao tối đa của tooltip. | | maxWidthTooltip | number | 250 | Chiều rộng tối đa của tooltip. | | ngClassObject | TYPE_OBJECT | ... | Đối tượng class CSS để apply vào div chứa nội dung. | | showTooltip | boolean | false | Bật/tắt hiển thị tooltip khi nội dung bị cắt. | | timeHidePopoverOnMouseout | number | 50 | Thời gian ẩn tooltip sau khi mouseout (ms). | | useXssFilter | boolean | true | Bật bộ lọc XSS cho nội dung HTML. | | zIndexPopover | number | 1001 | Z-index của tooltip. |

Outputs

| Sự kiện | Kiểu dữ liệu | Mô tả | | :-------------------- | :------------------------------- | :----------------------------------------------------------- | | outAction | string | Phát ra khi người dùng nhấn 'view-more' hoặc 'hidden-more'. | | outClick | Event \| TYPE_POPOVER_EVENT | Phát ra khi người dùng click vào vùng nội dung hoặc tooltip. | | outDisplayLineClamp | boolean | Phát ra trạng thái đang thu gọn hay mở rộng. | | outFunctionControl | ILineClampFunctionControlEvent | Cung cấp các phương thức điều khiển component (refresh). |

Tech Stack

• Core: Angular 18+, Signals
• Dependencies: @libs-ui/components-popover, @libs-ui/components-buttons-button, @libs-ui/pipes-security-trust.

License

MIT