@libs-ui/components-breadcrumb 0.2.278 → 0.2.280
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 +244 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,3 +1,245 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Breadcrumb
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-breadcrumb` là một component Angular giúp hiển thị đường dẫn phân cấp (breadcrumb) hoặc tiến trình theo các bước, với khả năng đánh dấu bước đã hoàn thành, bước đang chọn, và bước vô hiệu hóa.
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị danh sách các bước với số và tiêu đề
|
|
10
|
+
- Hỗ trợ trạng thái hoàn thành (completed), chọn (selected), và vô hiệu hóa (disabled)
|
|
11
|
+
- Căn chỉnh linh hoạt: `center` | `left` | `right`
|
|
12
|
+
- Tùy chỉnh CSS class cho mỗi bước
|
|
13
|
+
- Phát ra sự kiện khi người dùng chọn bước
|
|
14
|
+
- Hỗ trợ nền trắng (backgroundWhite)
|
|
15
|
+
|
|
16
|
+
## Cài đặt
|
|
17
|
+
|
|
18
|
+
### Yêu cầu
|
|
19
|
+
|
|
20
|
+
- Angular 18.0.0 trở lên
|
|
21
|
+
- Tailwind CSS 3.3.0 trở lên (nếu sử dụng Tailwind)
|
|
22
|
+
|
|
23
|
+
### Hướng dẫn cài đặt
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @libs-ui/components-breadcrumb
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
hoặc
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
yarn add @libs-ui/components-breadcrumb
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Sử dụng
|
|
36
|
+
|
|
37
|
+
### Import và sử dụng ngay trong template
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
import { Component } from '@angular/core';
|
|
41
|
+
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
42
|
+
|
|
43
|
+
@Component({
|
|
44
|
+
selector: 'app-example',
|
|
45
|
+
standalone: true,
|
|
46
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
47
|
+
template: `
|
|
48
|
+
<libs_ui-components-breadcrumb
|
|
49
|
+
[steps]="steps"
|
|
50
|
+
[completedIndex]="[1]"
|
|
51
|
+
[mode]="'center'"
|
|
52
|
+
></libs_ui-components-breadcrumb>
|
|
53
|
+
`
|
|
54
|
+
})
|
|
55
|
+
export class ExampleComponent {
|
|
56
|
+
steps = [
|
|
57
|
+
{ number: 1, title: 'Bước 1' },
|
|
58
|
+
{ number: 2, title: 'Bước 2' },
|
|
59
|
+
{ number: 3, title: 'Bước 3' }
|
|
60
|
+
];
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
#### Sử dụng với file HTML riêng biệt
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
@Component({
|
|
68
|
+
selector: 'app-example',
|
|
69
|
+
standalone: true,
|
|
70
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
71
|
+
templateUrl: './example.component.html'
|
|
72
|
+
})
|
|
73
|
+
export class ExampleComponent {}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<libs_ui-components-breadcrumb
|
|
78
|
+
[steps]="steps"
|
|
79
|
+
[completedIndex]="[1]"
|
|
80
|
+
mode="left"
|
|
81
|
+
></libs_ui-components-breadcrumb>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Công nghệ sử dụng
|
|
85
|
+
|
|
86
|
+
- **Angular 18**: Sử dụng standalone components và Signals
|
|
87
|
+
- **Tailwind CSS**: Tùy chọn cho styling
|
|
88
|
+
|
|
89
|
+
## API Reference
|
|
90
|
+
|
|
91
|
+
### Inputs
|
|
92
|
+
|
|
93
|
+
| Tên | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
94
|
+
|-----------------|--------------------------|-------------|-------------------------------------------------------------|
|
|
95
|
+
| width | `number` | `24` | Chiều rộng mỗi bước (pixel) |
|
|
96
|
+
| mode | `TYPE_MODE_BREADCRUMB` | `'center'` | Căn chỉnh breadcrumb: `center` `left` `right` |
|
|
97
|
+
| steps | `Array<ITabBreadCrumb>` | `[]` | Danh sách các bước với số và tiêu đề |
|
|
98
|
+
| classInclude | `string` | `undefined` | CSS class bổ sung cho mỗi bước |
|
|
99
|
+
| completedIndex | `Array<number>` | `[]` | Các index bước đã hoàn thành |
|
|
100
|
+
| backgroundWhite | `boolean` | `false` | Bật nền trắng khi `true` |
|
|
101
|
+
|
|
102
|
+
### Outputs
|
|
103
|
+
|
|
104
|
+
| Tên | Kiểu dữ liệu | Mô tả |
|
|
105
|
+
|-----------------|---------------------------------------|-----------------------------------------------------|
|
|
106
|
+
| outStepSelected | `(ITabBreadCrumbSelected) => void` | Phát ra sự kiện khi chọn bước, trả về `{ index }` |
|
|
107
|
+
|
|
108
|
+
### Interfaces
|
|
109
|
+
|
|
110
|
+
#### `ITabBreadCrumb`
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
export interface ITabBreadCrumb {
|
|
114
|
+
number: number;
|
|
115
|
+
title: string;
|
|
116
|
+
valid?: boolean;
|
|
117
|
+
config?: IPopover;
|
|
118
|
+
disable?: boolean;
|
|
119
|
+
classInclude?: string;
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
#### `TYPE_MODE_BREADCRUMB`
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
export type TYPE_MODE_BREADCRUMB = 'center' | 'left' | 'right';
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Ví dụ
|
|
130
|
+
|
|
131
|
+
### Breadcrumb cơ bản
|
|
132
|
+
|
|
133
|
+
**TypeScript (breadcrumb-basic.component.ts):**
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import { Component } from '@angular/core';
|
|
137
|
+
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
138
|
+
|
|
139
|
+
@Component({
|
|
140
|
+
selector: 'app-breadcrumb-basic',
|
|
141
|
+
standalone: true,
|
|
142
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
143
|
+
template: `
|
|
144
|
+
<libs_ui-components-breadcrumb
|
|
145
|
+
[steps]="steps"
|
|
146
|
+
></libs_ui-components-breadcrumb>
|
|
147
|
+
`
|
|
148
|
+
})
|
|
149
|
+
export class BreadcrumbBasicComponent {
|
|
150
|
+
steps = [
|
|
151
|
+
{ number: 1, title: 'Bước 1' },
|
|
152
|
+
{ number: 2, title: 'Bước 2' },
|
|
153
|
+
{ number: 3, title: 'Bước 3' }
|
|
154
|
+
];
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Breadcrumb với các chế độ căn chỉnh
|
|
159
|
+
|
|
160
|
+
**HTML (breadcrumb-mode.component.html):**
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<div class="flex gap-4">
|
|
164
|
+
<libs_ui-components-breadcrumb
|
|
165
|
+
[steps]="steps"
|
|
166
|
+
mode="left"
|
|
167
|
+
></libs_ui-components-breadcrumb>
|
|
168
|
+
<libs_ui-components-breadcrumb
|
|
169
|
+
[steps]="steps"
|
|
170
|
+
mode="center"
|
|
171
|
+
></libs_ui-components-breadcrumb>
|
|
172
|
+
<libs_ui-components-breadcrumb
|
|
173
|
+
[steps]="steps"
|
|
174
|
+
mode="right"
|
|
175
|
+
></libs_ui-components-breadcrumb>
|
|
176
|
+
</div>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Breadcrumb với bước hoàn thành và vô hiệu hóa
|
|
180
|
+
|
|
181
|
+
**TypeScript (breadcrumb-status.component.ts):**
|
|
182
|
+
|
|
183
|
+
```typescript
|
|
184
|
+
import { Component } from '@angular/core';
|
|
185
|
+
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
186
|
+
|
|
187
|
+
@Component({
|
|
188
|
+
selector: 'app-breadcrumb-status',
|
|
189
|
+
standalone: true,
|
|
190
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
191
|
+
templateUrl: './breadcrumb-status.component.html'
|
|
192
|
+
})
|
|
193
|
+
export class BreadcrumbStatusComponent {
|
|
194
|
+
steps = [
|
|
195
|
+
{ number: 1, title: 'Bước 1', valid: true },
|
|
196
|
+
{ number: 2, title: 'Bước 2', valid: false },
|
|
197
|
+
{ number: 3, title: 'Bước 3', disable: true },
|
|
198
|
+
{ number: 4, title: 'Bước 4' }
|
|
199
|
+
];
|
|
200
|
+
completedIndex = [0];
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
**HTML (breadcrumb-status.component.html):**
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<libs_ui-components-breadcrumb
|
|
208
|
+
[steps]="steps"
|
|
209
|
+
[completedIndex]="completedIndex"
|
|
210
|
+
></libs_ui-components-breadcrumb>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
+### Breadcrumb Arrow Style (Multi-Step)
|
|
214
|
+
+
|
|
215
|
+
+**HTML (breadcrumb-arrow.component.html):**
|
|
216
|
+
+```html
|
|
217
|
+
+<libs_ui-components-breadcrumb-multi_step
|
|
218
|
+
+ [stepsMulti]="arrowSteps"
|
|
219
|
+
+ (outMultiStepSelect)="onArrowStepSelected($event)">
|
|
220
|
+
+</libs_ui-components-breadcrumb-multi_step>
|
|
221
|
+
+```
|
|
222
|
+
+
|
|
223
|
+
+**TypeScript (breadcrumb-arrow.component.ts):**
|
|
224
|
+
+```typescript
|
|
225
|
+
+import { Component } from '@angular/core';
|
|
226
|
+
+import { LibsUiComponentsBreadcrumbMultiStepComponent } from '@libs-ui/components-breadcrumb';
|
|
227
|
+
+import { ITabBreadCrumbMultiStep, TYPE_MULTI_STEP } from '@libs-ui/components-breadcrumb';
|
|
228
|
+
+
|
|
229
|
+
+@Component({
|
|
230
|
+
+ selector: 'app-breadcrumb-arrow',
|
|
231
|
+
+ standalone: true,
|
|
232
|
+
+ imports: [LibsUiComponentsBreadcrumbMultiStepComponent],
|
|
233
|
+
+ templateUrl: './breadcrumb-arrow.component.html'
|
|
234
|
+
+})
|
|
235
|
+
+export class BreadcrumbArrowComponent {
|
|
236
|
+
+ arrowSteps: ITabBreadCrumbMultiStep[] = [
|
|
237
|
+
+ { number: 1, title: 'Bước 1', status: 'completed' as TYPE_MULTI_STEP, type: 'text' },
|
|
238
|
+
+ { number: 2, title: 'Bước 2', status: 'selected' as TYPE_MULTI_STEP, type: 'text' },
|
|
239
|
+
+ { number: 3, title: 'Bước 3', status: 'normal' as TYPE_MULTI_STEP, type: 'text' }
|
|
240
|
+
+ ];
|
|
241
|
+
+ onArrowStepSelected(event: any) {
|
|
242
|
+
+ console.log('Arrow step selected:', event);
|
|
243
|
+
+ }
|
|
244
|
+
+}
|
|
245
|
+
+```
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-breadcrumb",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.280",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^18.2.0",
|
|
6
6
|
"@angular/core": "^18.2.0",
|
|
7
7
|
"@ngx-translate/core": "^15.0.0",
|
|
8
|
-
"@libs-ui/components-list": "^0.2.
|
|
9
|
-
"@libs-ui/components-popover": "^0.2.
|
|
10
|
-
"@libs-ui/components-dropdown": "^0.2.
|
|
8
|
+
"@libs-ui/components-list": "^0.2.280",
|
|
9
|
+
"@libs-ui/components-popover": "^0.2.280",
|
|
10
|
+
"@libs-ui/components-dropdown": "^0.2.280"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"module": "fesm2022/libs-ui-components-breadcrumb.mjs",
|