@libs-ui/components-inputs-quill2x-preview 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 +74 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,75 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Quill2x Preview Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@libs-ui/components-inputs-quill2x-preview` là một component chuyên dụng để hiển thị nội dung HTML được tạo ra từ trình soạn thảo Quill2x. Nó đảm bảo nội dung được hiển thị nhất quán với trình soạn thảo, đồng thời hỗ trợ các tính năng như giới hạn chiều cao (view more/collapse) và bảo mật nội dung.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 🔍 **Consistent Rendering**: Hiển thị nội dung HTML với đầy đủ style tương ứng như khi soạn thảo trong Quill2x.
|
|
8
|
+
- 🛡️ **HTML Security**: Sử dụng `LibsUiPipesSecurityTrustPipe` để sanitize nội dung HTML, ngăn chặn các cuộc tấn công XSS.
|
|
9
|
+
- 📉 **View More / Collapse**: Tự động kiểm tra độ cao của nội dung. Nếu vượt quá `maxHeight`, component sẽ hiển thị nút "Xem thêm" và hiệu ứng gradient mờ dần ở đáy.
|
|
10
|
+
- 🎨 **Custom Styling**: Cho phép truyền thêm class tùy biến cho container thông qua input `containerClass`.
|
|
11
|
+
- ⚡ **Performance**: Sử dụng `ChangeDetectionStrategy.OnPush` để tối ưu hiệu năng render.
|
|
12
|
+
|
|
13
|
+
## Cài đặt
|
|
14
|
+
|
|
15
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @libs-ui/components-inputs-quill2x-preview
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Cách sử dụng
|
|
22
|
+
|
|
23
|
+
### Import Module
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import { LibsUiComponentsInputsQuill2xPreviewComponent } from '@libs-ui/components-inputs-quill2x-preview';
|
|
27
|
+
|
|
28
|
+
@Component({
|
|
29
|
+
standalone: true,
|
|
30
|
+
imports: [LibsUiComponentsInputsQuill2xPreviewComponent],
|
|
31
|
+
// ...
|
|
32
|
+
})
|
|
33
|
+
export class YourComponent {}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Ví dụ cơ bản
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<libs_ui-components-inputs-quill2x-preview [data]="htmlContent"></libs_ui-components-inputs-quill2x-preview>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Giới hạn chiều cao với nút Xem thêm
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<libs_ui-components-inputs-quill2x-preview
|
|
46
|
+
[data]="longHtmlContent"
|
|
47
|
+
[maxHeight]="200"
|
|
48
|
+
[hasButtonCollapseExpand]="true"
|
|
49
|
+
[labelButtonViewMore]="'Xem thêm nội dung'"
|
|
50
|
+
[labelButtonCollapse]="'Thu gọn'"></libs_ui-components-inputs-quill2x-preview>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## API Reference
|
|
54
|
+
|
|
55
|
+
### Inputs
|
|
56
|
+
|
|
57
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
58
|
+
| :------------------------ | :----------- | :----------------- | :-------------------------------------------------------- |
|
|
59
|
+
| `data` | `string` | **(Required)** | Nội dung HTML cần hiển thị. |
|
|
60
|
+
| `containerClass` | `string` | `undefined` | Class CSS bổ sung cho container. |
|
|
61
|
+
| `expand` | `boolean` | **(Model)** | Trạng thái mở rộng hoặc thu gọn của component. |
|
|
62
|
+
| `hasButtonCollapseExpand` | `boolean` | `false` | Bật/tắt tính năng giới hạn chiều cao và nút Xem thêm. |
|
|
63
|
+
| `maxHeight` | `number` | `160` | Chiều cao tối đa (pixel) trước khi hiển thị nút Xem thêm. |
|
|
64
|
+
| `labelButtonCollapse` | `string` | `'i18n_collapse'` | Nhãn cho nút thu gọn. |
|
|
65
|
+
| `labelButtonViewMore` | `string` | `'i18n_view_more'` | Nhãn cho nút xem thêm. |
|
|
66
|
+
|
|
67
|
+
## Tech Stack
|
|
68
|
+
|
|
69
|
+
- **Core**: Angular 18+ (Signals)
|
|
70
|
+
- **Styles**: Quill "snow" theme compatible styles
|
|
71
|
+
- **Pipes**: `@libs-ui/pipes-security-trust`
|
|
72
|
+
|
|
73
|
+
## License
|
|
74
|
+
|
|
75
|
+
MIT
|