@libs-ui/components-label 0.2.355-14 → 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 +93 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,3 +1,94 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Label Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@libs-ui/components-label` là một component cơ bản nhưng đa năng dùng để hiển thị nhãn (label) cho các thành phần UI khác. Nó hỗ trợ tooltip, văn bản phụ, nút bấm điều khiển và cả công tắc (toggle switch).
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 🌍 **Đa ngôn ngữ**: Hỗ trợ tích hợp sẵn `TranslateModule`.
|
|
8
|
+
- 🛠️ **Cấu hình phong phú**:
|
|
9
|
+
- Hỗ trợ văn bản bên trái (`labelLeft`) và bên phải (`labelRight`).
|
|
10
|
+
- Đánh dấu bắt buộc (`required`).
|
|
11
|
+
- Hỗ trợ Tooltip (`popover`) với biểu tượng tùy chỉnh.
|
|
12
|
+
- Tích hợp công tắc (`hasToggle`).
|
|
13
|
+
- 🔘 **Điều khiển linh hoạt**:
|
|
14
|
+
- Cho phép thêm mảng các nút bấm (`IButton`) vào bên trái, bên phải hoặc trong phần mô tả.
|
|
15
|
+
- Xử lý các sự kiện click nút và chuyển đổi trạng thái công tắc.
|
|
16
|
+
- 📝 **Mô tả & Đếm số**:
|
|
17
|
+
- Hiển thị văn bản mô tả phụ bên dưới nhãn chính.
|
|
18
|
+
- Tích hợp bộ đếm ký tự (`count` và `limitLength`) thường dùng cho các ô nhập liệu.
|
|
19
|
+
|
|
20
|
+
## Cài đặt
|
|
21
|
+
|
|
22
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @libs-ui/components-label
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Cách sử dụng
|
|
29
|
+
|
|
30
|
+
### Import Module
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
|
|
34
|
+
|
|
35
|
+
@Component({
|
|
36
|
+
standalone: true,
|
|
37
|
+
imports: [LibsUiComponentsLabelComponent],
|
|
38
|
+
// ...
|
|
39
|
+
})
|
|
40
|
+
export class YourComponent {}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Ví dụ cơ bản
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<libs_ui-components-label
|
|
47
|
+
[labelLeft]="'Họ và tên'"
|
|
48
|
+
[required]="true"
|
|
49
|
+
[popover]="{ content: 'Vui lòng nhập đầy đủ tên tiếng Việt có dấu' }"></libs_ui-components-label>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Ví dụ nâng cao (Có Toggle và Buttons)
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<libs_ui-components-label
|
|
56
|
+
[labelLeft]="'Thông báo qua Email'"
|
|
57
|
+
[hasToggle]="true"
|
|
58
|
+
[toggleActive]="true"
|
|
59
|
+
[buttonsRight]="[{ icon: 'libs-ui-icon-edit', key: 'edit' }]"
|
|
60
|
+
[description]="'Gửi bản tin hàng tuần về các sản phẩm mới nhất.'"></libs_ui-components-label>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## API Reference
|
|
64
|
+
|
|
65
|
+
### Inputs
|
|
66
|
+
|
|
67
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
68
|
+
| :----------------------------- | :----------- | :---------- | :---------------------------------------------------------- |
|
|
69
|
+
| `labelLeft` | `string` | `undefined` | Văn bản nhãn bên trái. |
|
|
70
|
+
| `required` | `boolean` | `false` | Hiển thị dấu sao đỏ đánh dấu bắt buộc. |
|
|
71
|
+
| `popover` | `IPopover` | `undefined` | Cấu hình cho tooltip hiển thị khi hover vào icon thông tin. |
|
|
72
|
+
| `buttonsLeft` / `buttonsRight` | `IButton[]` | `[]` | Danh sách các nút bấm ở hai bên nhãn. |
|
|
73
|
+
| `hasToggle` | `boolean` | `false` | Hiển thị công tắc chuyển đổi (switch). |
|
|
74
|
+
| `toggleActive` | `boolean` | `false` | Trạng thái của công tắc. |
|
|
75
|
+
| `description` | `string` | `undefined` | Văn bản mô tả phía dưới nhãn. |
|
|
76
|
+
| `count` | `number` | `0` | Số lượng ký tự hiện tại (để hiển thị bộ đếm). |
|
|
77
|
+
| `limitLength` | `number` | `0` | Giới hạn ký tự tối đa. |
|
|
78
|
+
|
|
79
|
+
### Outputs
|
|
80
|
+
|
|
81
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
82
|
+
| :------------------- | :------------- | :--------------------------------------------------------------- |
|
|
83
|
+
| `outClickButton` | `IButton` | Phát ra khi người dùng click vào bất kỳ nút nào trong component. |
|
|
84
|
+
| `outSwitchEvent` | `ISwitchEvent` | Phát ra khi trạng thái công tắc thay đổi. |
|
|
85
|
+
| `outLabelRightClick` | `boolean` | Phát ra khi click vào phần văn bản bên phải. |
|
|
86
|
+
|
|
87
|
+
## Tech Stack
|
|
88
|
+
|
|
89
|
+
- **Core**: Angular 18+, Signals
|
|
90
|
+
- **Dependencies**: `@libs-ui/components-popover`, `@libs-ui/components-buttons-button`, `@libs-ui/components-switch`.
|
|
91
|
+
|
|
92
|
+
## License
|
|
93
|
+
|
|
94
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-label",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-buttons-button": "0.2.355-
|
|
7
|
-
"@libs-ui/components-popover": "0.2.355-
|
|
8
|
-
"@libs-ui/components-switch": "0.2.355-
|
|
9
|
-
"@libs-ui/utils": "0.2.355-
|
|
6
|
+
"@libs-ui/components-buttons-button": "0.2.355-15",
|
|
7
|
+
"@libs-ui/components-popover": "0.2.355-15",
|
|
8
|
+
"@libs-ui/components-switch": "0.2.355-15",
|
|
9
|
+
"@libs-ui/utils": "0.2.355-15",
|
|
10
10
|
"@ngx-translate/core": "^15.0.0"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|