@libs-ui/components-line-clamp 0.2.355-13 → 0.2.355-15
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 +89 -2
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,3 +1,90 @@
|
|
|
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
|
+
| `content` | `string` | `required` | Nội dung văn bản hoặc HTML cần hiển thị. |
|
|
65
|
+
| `maxHeight` | `number` | `required` | Độ cao tối đa (px). Công thức: (line-height) \* (số dòng). |
|
|
66
|
+
| `lengthLimitDisplay` | `number` | `200` | Giới hạn số ký tự để tính toán cắt chuỗi ban đầu. |
|
|
67
|
+
| `showTooltip` | `boolean` | `false` | Bật/tắt hiển thị tooltip khi nội dung bị cắt. |
|
|
68
|
+
| `hasBackgroundGradient` | `boolean` | `false` | Hiển thị hiệu ứng mờ dần ở phía dưới khi bị cắt. |
|
|
69
|
+
| `ignoreShowButtonCollapseExpand` | `boolean` | `false` | Ẩn hoàn toàn nút Xem thêm / Thu gọn. |
|
|
70
|
+
| `isInnerText` | `boolean` | `false` | Nếu true, sẽ render dưới dạng `innerText` (không xử lý HTML). |
|
|
71
|
+
| `ngClassObject` | `TYPE_OBJECT` | `...` | Đối tượng class CSS để apply vào div chứa nội dung. |
|
|
72
|
+
| `labelButtonViewMore` | `string` | `'i18n_view_more'` | Nhãn cho nút Xem thêm. |
|
|
73
|
+
| `labelButtonCollapse` | `string` | `'i18n_collapse'` | Nhãn cho nút Thu gọn. |
|
|
74
|
+
|
|
75
|
+
### Outputs
|
|
76
|
+
|
|
77
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
78
|
+
| :-------------------- | :----------- | :---------------------------------------------------------- |
|
|
79
|
+
| `outAction` | `string` | Phát ra khi người dùng nhấn 'view-more' hoặc 'hidden-more'. |
|
|
80
|
+
| `outDisplayLineClamp` | `boolean` | Phát ra trạng thái đang thu gọn hay mở rộng. |
|
|
81
|
+
| `outClick` | `Event` | Phát ra khi người dùng click vào vùng nội dung. |
|
|
82
|
+
|
|
83
|
+
## Tech Stack
|
|
84
|
+
|
|
85
|
+
- **Core**: Angular 18+, Signals
|
|
86
|
+
- **Dependencies**: `@libs-ui/components-popover`, `@libs-ui/components-buttons-button`, `@libs-ui/pipes-security-trust`.
|
|
87
|
+
|
|
88
|
+
## License
|
|
89
|
+
|
|
90
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-line-clamp",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/interfaces-types": "0.2.355-
|
|
8
|
-
"@libs-ui/components-buttons-button": "0.2.355-
|
|
9
|
-
"@libs-ui/components-popover": "0.2.355-
|
|
10
|
-
"@libs-ui/pipes-escape-html": "0.2.355-
|
|
11
|
-
"@libs-ui/pipes-security-trust": "0.2.355-
|
|
7
|
+
"@libs-ui/interfaces-types": "0.2.355-15",
|
|
8
|
+
"@libs-ui/components-buttons-button": "0.2.355-15",
|
|
9
|
+
"@libs-ui/components-popover": "0.2.355-15",
|
|
10
|
+
"@libs-ui/pipes-escape-html": "0.2.355-15",
|
|
11
|
+
"@libs-ui/pipes-security-trust": "0.2.355-15",
|
|
12
12
|
"@ngx-translate/core": "^15.0.0",
|
|
13
|
-
"@libs-ui/utils": "0.2.355-
|
|
13
|
+
"@libs-ui/utils": "0.2.355-15"
|
|
14
14
|
},
|
|
15
15
|
"sideEffects": false,
|
|
16
16
|
"module": "fesm2022/libs-ui-components-line-clamp.mjs",
|