@libs-ui/components-line-clamp 0.2.355-9 → 0.2.356-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -2
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,3 +1,102 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Line Clamp Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@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 đủ.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- ✂️ **Giới hạn dòng (Line Clamping)**: Trực tiếp giới hạn số dòng dựa trên `maxHeight`.
|
|
8
|
+
- 🔗 **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.
|
|
9
|
+
- 💬 **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.
|
|
10
|
+
- 🎨 **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`.
|
|
11
|
+
- 🔒 **Security**: Hỗ trợ lọc XSS thông qua `useXssFilter` và hỗ trợ cả `innerHTML` lẫn `innerText`.
|
|
12
|
+
- 🌈 **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.
|
|
13
|
+
|
|
14
|
+
## Cài đặt
|
|
15
|
+
|
|
16
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @libs-ui/components-line-clamp
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Cách sử dụng
|
|
23
|
+
|
|
24
|
+
### Import Module
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { LibsUiComponentsLineClampComponent } from '@libs-ui/components-line-clamp';
|
|
28
|
+
|
|
29
|
+
@Component({
|
|
30
|
+
standalone: true,
|
|
31
|
+
imports: [LibsUiComponentsLineClampComponent],
|
|
32
|
+
// ...
|
|
33
|
+
})
|
|
34
|
+
export class YourComponent {}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Ví dụ cơ bản (Giới hạn độ cao)
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<libs_ui-components-line_clamp
|
|
41
|
+
[content]="longText"
|
|
42
|
+
[maxHeight]="48"
|
|
43
|
+
[labelButtonViewMore]="'Xem thêm'"
|
|
44
|
+
[labelButtonCollapse]="'Thu gọn'"></libs_ui-components-line_clamp>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Ví dụ có Tooltip và Gradient
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<libs_ui-components-line_clamp
|
|
51
|
+
[content]="htmlContent"
|
|
52
|
+
[maxHeight]="60"
|
|
53
|
+
[showTooltip]="true"
|
|
54
|
+
[hasBackgroundGradient]="true"
|
|
55
|
+
[maxWidthTooltip]="300"></libs_ui-components-line_clamp>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## API Reference
|
|
59
|
+
|
|
60
|
+
### Inputs
|
|
61
|
+
|
|
62
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
63
|
+
| :-------------------------------------- | :----------------------- | :----------------- | :------------------------------------------------------------ |
|
|
64
|
+
| `classClassIncludeButtonCollapseExpand` | `string` | `'!p-0'` | Class CSS cho container nút collapse/expand. |
|
|
65
|
+
| `classClassLabelButtonCollapseExpand` | `string` | `libs-...` | Class CSS cho nhãn nút collapse/expand. |
|
|
66
|
+
| `content` | `string` | `required` | Nội dung văn bản hoặc HTML cần hiển thị. |
|
|
67
|
+
| `defaultIsCollapse` | `boolean` | `true` | Mặc định thu gọn khi khởi tạo. |
|
|
68
|
+
| `directionTooltip` | `TYPE_POPOVER_DIRECTION` | `'top'` | Hướng hiển thị tooltip. |
|
|
69
|
+
| `hasBackgroundGradient` | `boolean` | `false` | Hiển thị hiệu ứng mờ dần ở phía dưới khi bị cắt. |
|
|
70
|
+
| `ignoreShowButtonCollapse` | `boolean` | `undefined` | Ẩn nút Thu gọn (chỉ hiện nút Xem thêm). |
|
|
71
|
+
| `ignoreShowButtonCollapseExpand` | `boolean` | `false` | Ẩn hoàn toàn nút Xem thêm / Thu gọn. |
|
|
72
|
+
| `ignoreStopPropagationTooltipEvent` | `boolean` | `false` | Ngăn chặn nổi bọt sự kiện tooltip. |
|
|
73
|
+
| `isInnerText` | `boolean` | `false` | Nếu true, sẽ render dưới dạng `innerText` (không xử lý HTML). |
|
|
74
|
+
| `labelButtonCollapse` | `string` | `'i18n_collapse'` | Nhãn cho nút Thu gọn. |
|
|
75
|
+
| `labelButtonViewMore` | `string` | `'i18n_view_more'` | Nhãn cho nút Xem thêm. |
|
|
76
|
+
| `lengthLimitDisplay` | `number` | `200` | Giới hạn số ký tự để tính toán cắt chuỗi ban đầu. |
|
|
77
|
+
| `maxHeight` | `number` | `required` | Độ cao tối đa (px). Công thức: (line-height) \* (số dòng). |
|
|
78
|
+
| `maxHeightTooltip` | `number` | `150` | Chiều cao tối đa của tooltip. |
|
|
79
|
+
| `maxWidthTooltip` | `number` | `250` | Chiều rộng tối đa của tooltip. |
|
|
80
|
+
| `ngClassObject` | `TYPE_OBJECT` | `...` | Đối tượng class CSS để apply vào div chứa nội dung. |
|
|
81
|
+
| `showTooltip` | `boolean` | `false` | Bật/tắt hiển thị tooltip khi nội dung bị cắt. |
|
|
82
|
+
| `timeHidePopoverOnMouseout` | `number` | `50` | Thời gian ẩn tooltip sau khi mouseout (ms). |
|
|
83
|
+
| `useXssFilter` | `boolean` | `true` | Bật bộ lọc XSS cho nội dung HTML. |
|
|
84
|
+
| `zIndexPopover` | `number` | `1001` | Z-index của tooltip. |
|
|
85
|
+
|
|
86
|
+
### Outputs
|
|
87
|
+
|
|
88
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
89
|
+
| :-------------------- | :------------------------------- | :----------------------------------------------------------- |
|
|
90
|
+
| `outAction` | `string` | Phát ra khi người dùng nhấn 'view-more' hoặc 'hidden-more'. |
|
|
91
|
+
| `outClick` | `Event \| TYPE_POPOVER_EVENT` | Phát ra khi người dùng click vào vùng nội dung hoặc tooltip. |
|
|
92
|
+
| `outDisplayLineClamp` | `boolean` | Phát ra trạng thái đang thu gọn hay mở rộng. |
|
|
93
|
+
| `outFunctionControl` | `ILineClampFunctionControlEvent` | Cung cấp các phương thức điều khiển component (refresh). |
|
|
94
|
+
|
|
95
|
+
## Tech Stack
|
|
96
|
+
|
|
97
|
+
- **Core**: Angular 18+, Signals
|
|
98
|
+
- **Dependencies**: `@libs-ui/components-popover`, `@libs-ui/components-buttons-button`, `@libs-ui/pipes-security-trust`.
|
|
99
|
+
|
|
100
|
+
## License
|
|
101
|
+
|
|
102
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-line-clamp",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
8
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
9
|
-
"@libs-ui/components-popover": "0.2.
|
|
10
|
-
"@libs-ui/pipes-escape-html": "0.2.
|
|
11
|
-
"@libs-ui/pipes-security-trust": "0.2.
|
|
7
|
+
"@libs-ui/interfaces-types": "0.2.356-0",
|
|
8
|
+
"@libs-ui/components-buttons-button": "0.2.356-0",
|
|
9
|
+
"@libs-ui/components-popover": "0.2.356-0",
|
|
10
|
+
"@libs-ui/pipes-escape-html": "0.2.356-0",
|
|
11
|
+
"@libs-ui/pipes-security-trust": "0.2.356-0",
|
|
12
12
|
"@ngx-translate/core": "^15.0.0",
|
|
13
|
-
"@libs-ui/utils": "0.2.
|
|
13
|
+
"@libs-ui/utils": "0.2.356-0"
|
|
14
14
|
},
|
|
15
15
|
"sideEffects": false,
|
|
16
16
|
"module": "fesm2022/libs-ui-components-line-clamp.mjs",
|