@libs-ui/components-breadcrumb 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 +128 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# @libs-ui/components-breadcrumb
|
|
2
|
+
|
|
3
|
+
> Component Breadcrumb để hiển thị tiến trình của một quy trình gồm nhiều bước.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsBreadcrumbComponent` là một standalone Angular component được thiết kế để hiển thị các bước trong một flowchart hoặc tiến trình làm việc. Mỗi bước có thể có trạng thái hoàn thành, đang chọn hoặc vô hiệu hóa.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ Hỗ trợ nhiều chế độ hiển thị (center, left, right).
|
|
12
|
+
- ✅ Tùy chỉnh chiều rộng khoảng cách giữa các bước.
|
|
13
|
+
- ✅ Tích hợp đa ngôn ngữ cho tiêu đề các bước.
|
|
14
|
+
- ✅ Điều khiển linh hoạt qua `FunctionsControl` (set selected, set completed, disable steps...).
|
|
15
|
+
- ✅ Sử dụng Angular Signals cho tính phản hồi cao.
|
|
16
|
+
- ✅ OnPush Change Detection tối ưu hiệu năng.
|
|
17
|
+
|
|
18
|
+
## Khi nào sử dụng
|
|
19
|
+
|
|
20
|
+
- Khi người dùng cần biết họ đang ở đâu trong một quy trình gồm nhiều bước.
|
|
21
|
+
- Khi cần hướng dẫn người dùng hoàn thành các bước theo một trình tự nhất định.
|
|
22
|
+
- Phù hợp cho các form đăng ký nhiều bước, quy trình checkout, hoặc thiết lập thông số.
|
|
23
|
+
|
|
24
|
+
## Cài đặt
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @libs-ui/components-breadcrumb
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Import
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
34
|
+
|
|
35
|
+
@Component({
|
|
36
|
+
standalone: true,
|
|
37
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
38
|
+
// ...
|
|
39
|
+
})
|
|
40
|
+
export class YourComponent {}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Ví dụ
|
|
44
|
+
|
|
45
|
+
### Basic
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<libs_ui-components-breadcrumb [steps]="breadcrumbSteps" />
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Với External Controls
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<libs_ui-components-breadcrumb
|
|
55
|
+
[steps]="breadcrumbSteps"
|
|
56
|
+
(outFunctionControl)="onFunctionsControl($event)" />
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## API
|
|
60
|
+
|
|
61
|
+
### libs_ui-components-breadcrumb
|
|
62
|
+
|
|
63
|
+
#### Inputs
|
|
64
|
+
|
|
65
|
+
| Property | Type | Default | Description |
|
|
66
|
+
| -------------------- | ------------------------------- | ----------- | --------------------------------------------------- |
|
|
67
|
+
| `[width]` | `number` | `24` | Chiều rộng của dải ngăn cách giữa các bước (pixel). |
|
|
68
|
+
| `[mode]` | `'center' \| 'left' \| 'right'` | `'center'` | Chế độ hiển thị của breadcrumb. |
|
|
69
|
+
| `[(steps)]` | `Array<ITabBreadCrumb>` | `undefined` | Danh sách các bước breadcrumb. |
|
|
70
|
+
| `[classInclude]` | `string` | `undefined` | Class CSS bổ sung cho container. |
|
|
71
|
+
| `[(completedIndex)]` | `Array<number>` | `[]` | Danh sách index các bước đã hoàn thành. |
|
|
72
|
+
| `[backgroundWhite]` | `boolean` | `undefined` | Có sử dụng nền trắng cho container không. |
|
|
73
|
+
|
|
74
|
+
#### Outputs
|
|
75
|
+
|
|
76
|
+
| Property | Type | Description |
|
|
77
|
+
| ---------------------- | --------------------------------- | ---------------------------------------------- |
|
|
78
|
+
| `(outStepSelected)` | `ITabBreadCrumbSelected` | Emit khi người dùng click vào một bước. |
|
|
79
|
+
| `(outFunctionControl)` | `IBreadCrumbFunctionControlEvent` | Emit object chứa các hàm điều khiển component. |
|
|
80
|
+
|
|
81
|
+
#### FunctionsControl Methods
|
|
82
|
+
|
|
83
|
+
| Method | Parameters | Description |
|
|
84
|
+
| -------------------- | ----------------------------------- | ---------------------------------------------- |
|
|
85
|
+
| `setSelectedStep` | `index: number` | Thiết lập bước đang được chọn. |
|
|
86
|
+
| `setCompletedStep` | `complete: boolean, index: number` | Đánh dấu một bước là đã hoàn thành hoặc chưa. |
|
|
87
|
+
| `setStepDisable` | `steps: Array<number>` | Thiết lập danh sách các bước bị vô hiệu hóa. |
|
|
88
|
+
| `getCompleteIndex` | - | Trả về danh sách index các bước đã hoàn thành. |
|
|
89
|
+
| `getSelectedIndex` | - | Trả về index bước hiện tại đang được chọn. |
|
|
90
|
+
| `resetCompleteIndex` | `resetAll: boolean, index?: number` | Reset trạng thái hoàn thành của các bước. |
|
|
91
|
+
|
|
92
|
+
## Types & Interfaces
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
export interface ITabBreadCrumb {
|
|
96
|
+
number: number;
|
|
97
|
+
title: string;
|
|
98
|
+
valid?: boolean;
|
|
99
|
+
disable?: boolean;
|
|
100
|
+
classInclude?: string;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export interface ITabBreadCrumbSelected {
|
|
104
|
+
index: number;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export interface IBreadCrumbFunctionControlEvent {
|
|
108
|
+
setSelectedStep: (index: number) => Promise<void>;
|
|
109
|
+
setCompletedStep: (complete: boolean, index: number) => Promise<void>;
|
|
110
|
+
setStepDisable: (steps: Array<number>) => Promise<void>;
|
|
111
|
+
getCompleteIndex: () => Promise<Array<number>>;
|
|
112
|
+
getSelectedIndex: () => Promise<number>;
|
|
113
|
+
resetCompleteIndex: (resetAll: boolean, index?: number) => Promise<void>;
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Công nghệ
|
|
118
|
+
|
|
119
|
+
| Technology | Version | Purpose |
|
|
120
|
+
| --------------- | ------- | ---------------- |
|
|
121
|
+
| Angular | 18+ | Framework |
|
|
122
|
+
| Angular Signals | - | State management |
|
|
123
|
+
| TailwindCSS | 3.x | Styling |
|
|
124
|
+
| OnPush | - | Change Detection |
|
|
125
|
+
|
|
126
|
+
## License
|
|
127
|
+
|
|
128
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-breadcrumb",
|
|
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
7
|
"@ngx-translate/core": "^15.0.0",
|
|
8
|
-
"@libs-ui/components-list": "0.2.355-
|
|
9
|
-
"@libs-ui/components-popover": "0.2.355-
|
|
10
|
-
"@libs-ui/components-dropdown": "0.2.355-
|
|
8
|
+
"@libs-ui/components-list": "0.2.355-15",
|
|
9
|
+
"@libs-ui/components-popover": "0.2.355-15",
|
|
10
|
+
"@libs-ui/components-dropdown": "0.2.355-15"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"module": "fesm2022/libs-ui-components-breadcrumb.mjs",
|