@libs-ui/components-buttons-tab 0.2.279 → 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 +153 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,3 +1,154 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Button Tab
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-buttons-tab` là một component Tab cho Angular, cho phép hiển thị danh sách tabs, hỗ trợ trạng thái active và tuỳ chỉnh màu cho type "other".
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị tabs dạng button theo danh sách đầu vào
|
|
10
|
+
- Two-way binding cho tab đang active (`keySelected`)
|
|
11
|
+
- Hỗ trợ vô hiệu hóa toàn bộ tabs (`disable`)
|
|
12
|
+
- Type `other` cho phép cấu hình màu chữ và nền riêng (`otherConfig`)
|
|
13
|
+
- Hỗ trợ hiển thị số lượng badge (`count`, `maxCount`, `modeCount`)
|
|
14
|
+
|
|
15
|
+
## Cài đặt
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @libs-ui/components-buttons-tab
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
hoặc
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add @libs-ui/components-buttons-tab
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Sử dụng
|
|
28
|
+
|
|
29
|
+
### Inline Template
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { Component } from '@angular/core';
|
|
33
|
+
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';
|
|
34
|
+
|
|
35
|
+
@Component({
|
|
36
|
+
selector: 'app-example',
|
|
37
|
+
standalone: true,
|
|
38
|
+
imports: [LibsUiComponentsButtonsTabComponent],
|
|
39
|
+
template: `
|
|
40
|
+
<libs_ui-components-buttons-tab
|
|
41
|
+
[items]="tabs"
|
|
42
|
+
[disable]="isDisabled"
|
|
43
|
+
[(keySelected)]="selectedKey"
|
|
44
|
+
[otherConfig]="otherConfig"
|
|
45
|
+
(outKeySelected)="onSelect($event)">
|
|
46
|
+
</libs_ui-components-buttons-tab>
|
|
47
|
+
`
|
|
48
|
+
})
|
|
49
|
+
export class ExampleComponent {
|
|
50
|
+
tabs: IButtonTab[] = [
|
|
51
|
+
{ key: 'tab1', label: 'Tab 1', type: 'blue' },
|
|
52
|
+
{ key: 'tab2', label: 'Tab 2', type: 'red', count: 5 },
|
|
53
|
+
{ key: 'tab3', label: 'Tab 3', type: 'other' }
|
|
54
|
+
];
|
|
55
|
+
isDisabled = false;
|
|
56
|
+
selectedKey = 'tab1';
|
|
57
|
+
otherConfig: IOtherConfig = { color: '#000000', background: '#ffffff' };
|
|
58
|
+
|
|
59
|
+
onSelect(key: string) {
|
|
60
|
+
console.log('Selected tab:', key);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### File HTML riêng
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
import { Component } from '@angular/core';
|
|
69
|
+
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';
|
|
70
|
+
|
|
71
|
+
@Component({
|
|
72
|
+
selector: 'app-example',
|
|
73
|
+
standalone: true,
|
|
74
|
+
imports: [LibsUiComponentsButtonsTabComponent],
|
|
75
|
+
templateUrl: './example.component.html'
|
|
76
|
+
})
|
|
77
|
+
export class ExampleComponent {
|
|
78
|
+
tabs: IButtonTab[] = [ /* ... */ ];
|
|
79
|
+
isDisabled = false;
|
|
80
|
+
selectedKey = '';
|
|
81
|
+
otherConfig: IOtherConfig = { color: '#000000', background: '#ffffff' };
|
|
82
|
+
|
|
83
|
+
onSelect(key: string) {}
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<libs_ui-components-buttons-tab
|
|
89
|
+
[items]="tabs"
|
|
90
|
+
[disable]="isDisabled"
|
|
91
|
+
[(keySelected)]="selectedKey"
|
|
92
|
+
[otherConfig]="otherConfig"
|
|
93
|
+
(outKeySelected)="onSelect($event)">
|
|
94
|
+
</libs_ui-components-buttons-tab>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Công nghệ sử dụng
|
|
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
|
+
| Property | Type | Required | Description |
|
|
123
|
+
|--------------|-------------------|----------|--------------------------------------------------------------|
|
|
124
|
+
| key | `string` | yes | Định danh duy nhất của tab, dùng cho two-way binding. |
|
|
125
|
+
| label | `string` | yes | Nội dung text hiển thị trên tab. |
|
|
126
|
+
| type | `TYPE_BUTTON_TAB` | yes | Chủ đề màu của tab; giá trị mặc định hoặc tuỳ chỉnh qua `otherConfig`. |
|
|
127
|
+
| count | `number` | no | Giá trị số (badge) hiển thị trên tab. |
|
|
128
|
+
| modeCount | `TYPE_BADGE_MODE` | no | Chế độ hiển thị badge khi `count` vượt quá `maxCount`. |
|
|
129
|
+
| maxCount | `number` | no | Số tối đa hiển thị trước khi chuyển sang định dạng `modeCount`. |
|
|
130
|
+
| class | `string` | no | Các class CSS thêm cho container tab. |
|
|
131
|
+
| classLabel | `string` | no | Các class CSS thêm cho label text. |
|
|
132
|
+
| disable | `boolean` | no | Nếu `true`: vô hiệu hoá tương tác click cho tab này. |
|
|
133
|
+
| data | `any` | no | Dữ liệu tuỳ ý gắn kèm với tab. |
|
|
134
|
+
|
|
135
|
+
#### `IOtherConfig`
|
|
136
|
+
| Property | Type | Required | Description |
|
|
137
|
+
|------------------|----------|----------|--------------------------------------------------------|
|
|
138
|
+
| color | `string` | yes | Màu chữ (label) cho tab đang active khi `type` là `other`. |
|
|
139
|
+
| background | `string` | no | Màu nền cho tab đang active khi `type` là `other`. |
|
|
140
|
+
| background_badge | `string` | no | Màu nền cho badge khi `type` là `other`. |
|
|
141
|
+
|
|
142
|
+
#### `TYPE_BUTTON_TAB`
|
|
143
|
+
| Value | Description |
|
|
144
|
+
|----------|------------------------------------------------------------|
|
|
145
|
+
| `blue` | Chủ đề màu xanh mặc định. |
|
|
146
|
+
| `green` | Chủ đề màu xanh lá (thành công). |
|
|
147
|
+
| `red` | Chủ đề màu đỏ (cảnh báo). |
|
|
148
|
+
| `orange` | Chủ đề màu cam (cảnh báo). |
|
|
149
|
+
| `yellow` | Chủ đề màu vàng (thông tin). |
|
|
150
|
+
| `cyan` | Chủ đề màu xanh lam nhạt (phụ). |
|
|
151
|
+
| `purple` | Chủ đề màu tím (nổi bật). |
|
|
152
|
+
| `brown` | Chủ đề màu nâu (trung tính). |
|
|
153
|
+
| `other` | Chủ đề tuỳ chỉnh; màu được định nghĩa qua `otherConfig`. |
|
|
154
|
+
| `string` | Các tên chủ đề tuỳ chỉnh khác. |
|
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.280",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": "^18.2.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.280",
|
|
7
|
+
"@libs-ui/components-popover": "^0.2.280",
|
|
8
|
+
"@libs-ui/utils": "^0.2.280",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|