@libs-ui/components-buttons-tab 0.2.355-9 → 0.2.356-1
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 +140 -108
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,16 +1,23 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Buttons Tab Component
|
|
2
|
+
|
|
3
|
+
> Version: `0.2.355-14`
|
|
4
|
+
>
|
|
5
|
+
> Component tab dạng button, hỗ trợ nhiều màu, badge count và tuỳ biến màu riêng với type `other`.
|
|
2
6
|
|
|
3
7
|
## Giới thiệu
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
`LibsUiComponentsButtonsTabComponent` là standalone Angular component dùng để hiển thị danh sách tab theo dạng button. Component hỗ trợ hiển thị badge count cho từng tab và cho phép disable toàn bộ hoặc disable từng tab.
|
|
6
10
|
|
|
7
11
|
## Tính năng
|
|
8
12
|
|
|
9
|
-
- Hiển thị
|
|
10
|
-
-
|
|
11
|
-
- Hỗ trợ
|
|
12
|
-
-
|
|
13
|
-
-
|
|
13
|
+
- ✅ Hiển thị tab theo danh sách `items`
|
|
14
|
+
- ✅ Hỗ trợ nhiều màu tab theo `type`
|
|
15
|
+
- ✅ Hỗ trợ badge count (`count`, `modeCount`, `maxCount`)
|
|
16
|
+
- ✅ Two-way binding key đang chọn qua `[(keySelected)]`
|
|
17
|
+
- ✅ Disable toàn bộ hoặc disable từng tab item
|
|
18
|
+
- ✅ Tuỳ biến màu với `otherConfig` khi `type = 'other'`
|
|
19
|
+
- ✅ OnPush Change Detection
|
|
20
|
+
- ✅ Angular Signals
|
|
14
21
|
|
|
15
22
|
## Cài đặt
|
|
16
23
|
|
|
@@ -18,140 +25,165 @@
|
|
|
18
25
|
npm install @libs-ui/components-buttons-tab
|
|
19
26
|
```
|
|
20
27
|
|
|
21
|
-
|
|
28
|
+
## Import
|
|
22
29
|
|
|
23
|
-
```
|
|
24
|
-
|
|
30
|
+
```typescript
|
|
31
|
+
import { Component } from '@angular/core';
|
|
32
|
+
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig, TYPE_BUTTON_TAB } from '@libs-ui/components-buttons-tab';
|
|
33
|
+
|
|
34
|
+
@Component({
|
|
35
|
+
standalone: true,
|
|
36
|
+
imports: [LibsUiComponentsButtonsTabComponent],
|
|
37
|
+
template: '',
|
|
38
|
+
})
|
|
39
|
+
export class ExampleComponent {}
|
|
25
40
|
```
|
|
26
41
|
|
|
27
|
-
##
|
|
42
|
+
## Cách sử dụng
|
|
28
43
|
|
|
29
|
-
###
|
|
44
|
+
### 1. Ví dụ inline template
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<libs_ui-components-buttons-tab
|
|
48
|
+
[items]="items"
|
|
49
|
+
[(keySelected)]="selectedKey"
|
|
50
|
+
(outKeySelected)="onKeySelected($event)"
|
|
51
|
+
/>
|
|
52
|
+
```
|
|
30
53
|
|
|
31
54
|
```typescript
|
|
32
|
-
import { Component } from '@angular/core';
|
|
33
|
-
import { LibsUiComponentsButtonsTabComponent, IButtonTab
|
|
55
|
+
import { Component, signal } from '@angular/core';
|
|
56
|
+
import { LibsUiComponentsButtonsTabComponent, IButtonTab } from '@libs-ui/components-buttons-tab';
|
|
34
57
|
|
|
35
58
|
@Component({
|
|
36
|
-
selector: 'app-example',
|
|
37
59
|
standalone: true,
|
|
38
60
|
imports: [LibsUiComponentsButtonsTabComponent],
|
|
39
61
|
template: `
|
|
40
62
|
<libs_ui-components-buttons-tab
|
|
41
|
-
[items]="
|
|
42
|
-
[
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
(outKeySelected)="onSelect($event)"></libs_ui-components-buttons-tab>
|
|
63
|
+
[items]="items"
|
|
64
|
+
[(keySelected)]="selectedKey()"
|
|
65
|
+
(outKeySelected)="onKeySelected($event)"
|
|
66
|
+
/>
|
|
46
67
|
`,
|
|
47
68
|
})
|
|
48
|
-
export class
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
{ key: '
|
|
69
|
+
export class InlineExampleComponent {
|
|
70
|
+
readonly selectedKey = signal<string>('overview');
|
|
71
|
+
|
|
72
|
+
readonly items: IButtonTab[] = [
|
|
73
|
+
{ key: 'overview', label: 'Overview', type: 'blue' },
|
|
74
|
+
{ key: 'details', label: 'Details', type: 'green' },
|
|
75
|
+
{ key: 'settings', label: 'Settings', type: 'orange' },
|
|
53
76
|
];
|
|
54
|
-
isDisabled = false;
|
|
55
|
-
selectedKey = 'tab1';
|
|
56
|
-
otherConfig: IOtherConfig = { color: '#000000', background: '#ffffff' };
|
|
57
77
|
|
|
58
|
-
|
|
59
|
-
|
|
78
|
+
onKeySelected(key: string): void {
|
|
79
|
+
this.selectedKey.set(key);
|
|
60
80
|
}
|
|
61
81
|
}
|
|
62
82
|
```
|
|
63
83
|
|
|
64
|
-
###
|
|
84
|
+
### 2. Ví dụ với file HTML riêng
|
|
85
|
+
|
|
86
|
+
`example.component.html`
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<libs_ui-components-buttons-tab
|
|
90
|
+
[items]="items"
|
|
91
|
+
[otherConfig]="otherConfig"
|
|
92
|
+
[(keySelected)]="selectedKey"
|
|
93
|
+
/>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
`example.component.ts`
|
|
65
97
|
|
|
66
98
|
```typescript
|
|
67
|
-
import { Component } from '@angular/core';
|
|
99
|
+
import { Component, signal } from '@angular/core';
|
|
68
100
|
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';
|
|
69
101
|
|
|
70
102
|
@Component({
|
|
71
|
-
selector: 'app-example',
|
|
72
103
|
standalone: true,
|
|
73
104
|
imports: [LibsUiComponentsButtonsTabComponent],
|
|
74
105
|
templateUrl: './example.component.html',
|
|
75
106
|
})
|
|
76
|
-
export class
|
|
77
|
-
|
|
78
|
-
|
|
107
|
+
export class HtmlFileExampleComponent {
|
|
108
|
+
readonly selectedKey = signal<string>('custom-1');
|
|
109
|
+
|
|
110
|
+
readonly otherConfig: IOtherConfig = {
|
|
111
|
+
color: '#0ea5e9',
|
|
112
|
+
background: '#e0f2fe',
|
|
113
|
+
background_badge: '#bae6fd',
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
readonly items: IButtonTab[] = [
|
|
117
|
+
{ key: 'custom-1', label: 'Custom 1', type: 'other' },
|
|
118
|
+
{ key: 'custom-2', label: 'Custom 2', type: 'other', count: 7, modeCount: 'x+' },
|
|
79
119
|
];
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Công nghệ
|
|
124
|
+
|
|
125
|
+
| Technology | Version | Purpose |
|
|
126
|
+
|------------|---------|---------|
|
|
127
|
+
| Angular | 18+ | Framework |
|
|
128
|
+
| Angular Signals | - | State management |
|
|
129
|
+
| TailwindCSS | 3.x | Styling (demo) |
|
|
130
|
+
| OnPush | - | Change Detection |
|
|
131
|
+
|
|
132
|
+
## API
|
|
133
|
+
|
|
134
|
+
### libs_ui-components-buttons-tab
|
|
83
135
|
|
|
84
|
-
|
|
136
|
+
#### Inputs
|
|
137
|
+
|
|
138
|
+
| Property | Type | Default | Description |
|
|
139
|
+
|----------|------|---------|-------------|
|
|
140
|
+
| `[disable]` | `boolean` | `false` | Disable toàn bộ tab |
|
|
141
|
+
| `[items]` | `Array<IButtonTab>` | `required` | Danh sách tab cần hiển thị |
|
|
142
|
+
| `[otherConfig]` | `IOtherConfig \| undefined` | `undefined` | Cấu hình màu cho type = other |
|
|
143
|
+
| `[(keySelected)]` | `string` | `''` | Key tab đang được chọn (two-way binding) |
|
|
144
|
+
|
|
145
|
+
#### Outputs
|
|
146
|
+
|
|
147
|
+
| Property | Type | Description |
|
|
148
|
+
|----------|------|-------------|
|
|
149
|
+
| `(outKeySelected)` | `EventEmitter<string>` | Emit key mỗi khi người dùng chọn tab |
|
|
150
|
+
|
|
151
|
+
## Types & Interfaces
|
|
152
|
+
|
|
153
|
+
```typescript
|
|
154
|
+
export interface IButtonTab {
|
|
155
|
+
key: string;
|
|
156
|
+
label: string;
|
|
157
|
+
type: TYPE_BUTTON_TAB;
|
|
158
|
+
count?: number;
|
|
159
|
+
modeCount?: TYPE_BADGE_MODE;
|
|
160
|
+
maxCount?: number;
|
|
161
|
+
class?: string;
|
|
162
|
+
classLabel?: string;
|
|
163
|
+
disable?: boolean;
|
|
164
|
+
data?: any;
|
|
85
165
|
}
|
|
166
|
+
|
|
167
|
+
export interface IOtherConfig {
|
|
168
|
+
color: string;
|
|
169
|
+
background?: string;
|
|
170
|
+
background_badge?: string;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
export type TYPE_BUTTON_TAB = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other' | string;
|
|
86
174
|
```
|
|
87
175
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
176
|
+
### Mô tả Types
|
|
177
|
+
|
|
178
|
+
- **IButtonTab**: Cấu hình cho từng tab item, có thể kèm badge count và tuỳ chỉnh class/disable.
|
|
179
|
+
- **IOtherConfig**: Cấu hình màu tuỳ biến cho type `other`.
|
|
180
|
+
- **TYPE_BUTTON_TAB**: Danh sách type màu hỗ trợ (có thể mở rộng bằng string).
|
|
181
|
+
|
|
182
|
+
## Demo
|
|
183
|
+
|
|
184
|
+
```bash
|
|
185
|
+
npx nx serve core-ui
|
|
95
186
|
```
|
|
96
187
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
- **Angular 18** standalone components, Signals
|
|
100
|
-
- **Tailwind CSS** 3.x
|
|
101
|
-
|
|
102
|
-
## API Reference
|
|
103
|
-
|
|
104
|
-
### Inputs
|
|
105
|
-
|
|
106
|
-
| Tên | Kiểu | Mặc định | Mô tả |
|
|
107
|
-
| ----------- | ------------------- | -------- | --------------------------------- |
|
|
108
|
-
| items | `Array<IButtonTab>` | required | Danh sách cấu hình tabs |
|
|
109
|
-
| disable | `boolean` | `false` | Vô hiệu hóa toàn bộ tabs |
|
|
110
|
-
| keySelected | `string` | `''` | Key của tab đang active (two-way) |
|
|
111
|
-
| otherConfig | `IOtherConfig` | n/a | Cấu hình màu cho type 'other' |
|
|
112
|
-
|
|
113
|
-
### Outputs
|
|
114
|
-
|
|
115
|
-
| Tên | Kiểu | Mô tả |
|
|
116
|
-
| -------------- | -------- | -------------------------- |
|
|
117
|
-
| outKeySelected | `string` | Emit key của tab được chọn |
|
|
118
|
-
|
|
119
|
-
### Interfaces
|
|
120
|
-
|
|
121
|
-
#### `IButtonTab`
|
|
122
|
-
|
|
123
|
-
| Property | Type | Required | Description |
|
|
124
|
-
| ---------- | ----------------- | -------- | ---------------------------------------------------------------------- |
|
|
125
|
-
| key | `string` | yes | Định danh duy nhất của tab, dùng cho two-way binding. |
|
|
126
|
-
| label | `string` | yes | Nội dung text hiển thị trên tab. |
|
|
127
|
-
| type | `TYPE_BUTTON_TAB` | yes | Chủ đề màu của tab; giá trị mặc định hoặc tuỳ chỉnh qua `otherConfig`. |
|
|
128
|
-
| count | `number` | no | Giá trị số (badge) hiển thị trên tab. |
|
|
129
|
-
| modeCount | `TYPE_BADGE_MODE` | no | Chế độ hiển thị badge khi `count` vượt quá `maxCount`. |
|
|
130
|
-
| maxCount | `number` | no | Số tối đa hiển thị trước khi chuyển sang định dạng `modeCount`. |
|
|
131
|
-
| class | `string` | no | Các class CSS thêm cho container tab. |
|
|
132
|
-
| classLabel | `string` | no | Các class CSS thêm cho label text. |
|
|
133
|
-
| disable | `boolean` | no | Nếu `true`: vô hiệu hoá tương tác click cho tab này. |
|
|
134
|
-
| data | `any` | no | Dữ liệu tuỳ ý gắn kèm với tab. |
|
|
135
|
-
|
|
136
|
-
#### `IOtherConfig`
|
|
137
|
-
|
|
138
|
-
| Property | Type | Required | Description |
|
|
139
|
-
| ---------------- | -------- | -------- | ---------------------------------------------------------- |
|
|
140
|
-
| color | `string` | yes | Màu chữ (label) cho tab đang active khi `type` là `other`. |
|
|
141
|
-
| background | `string` | no | Màu nền cho tab đang active khi `type` là `other`. |
|
|
142
|
-
| background_badge | `string` | no | Màu nền cho badge khi `type` là `other`. |
|
|
143
|
-
|
|
144
|
-
#### `TYPE_BUTTON_TAB`
|
|
145
|
-
|
|
146
|
-
| Value | Description |
|
|
147
|
-
| -------- | -------------------------------------------------------- |
|
|
148
|
-
| `blue` | Chủ đề màu xanh mặc định. |
|
|
149
|
-
| `green` | Chủ đề màu xanh lá (thành công). |
|
|
150
|
-
| `red` | Chủ đề màu đỏ (cảnh báo). |
|
|
151
|
-
| `orange` | Chủ đề màu cam (cảnh báo). |
|
|
152
|
-
| `yellow` | Chủ đề màu vàng (thông tin). |
|
|
153
|
-
| `cyan` | Chủ đề màu xanh lam nhạt (phụ). |
|
|
154
|
-
| `purple` | Chủ đề màu tím (nổi bật). |
|
|
155
|
-
| `brown` | Chủ đề màu nâu (trung tính). |
|
|
156
|
-
| `other` | Chủ đề tuỳ chỉnh; màu được định nghĩa qua `otherConfig`. |
|
|
157
|
-
| `string` | Các tên chủ đề tuỳ chỉnh khác. |
|
|
188
|
+
Truy cập: `http://localhost:4500/buttons/tab`
|
|
189
|
+
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-tab",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-badge": "0.2.
|
|
7
|
-
"@libs-ui/components-popover": "0.2.
|
|
8
|
-
"@libs-ui/utils": "0.2.
|
|
6
|
+
"@libs-ui/components-badge": "0.2.356-1",
|
|
7
|
+
"@libs-ui/components-popover": "0.2.356-1",
|
|
8
|
+
"@libs-ui/utils": "0.2.356-1",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|