@libs-ui/components-buttons-group 0.2.279 → 0.2.281
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 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,129 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Button Group
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-buttons-group` là một component nhóm Button cho Angular, cho phép hiển thị nhiều nút theo hàng, hỗ trợ quản lý trạng thái active và disable cho toàn nhóm.
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị danh sách nút theo hàng ngang
|
|
10
|
+
- Hỗ trợ two-way binding cho chỉ số nút đang active (`indexActive`)
|
|
11
|
+
- Emit sự kiện khi thay đổi nút active (`outChange`)
|
|
12
|
+
- Hỗ trợ disable toàn bộ nhóm nút
|
|
13
|
+
- Tích hợp popover control event (`outFunctionsControl`)
|
|
14
|
+
|
|
15
|
+
## Cài đặt
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @libs-ui/components-buttons-group
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
hoặc
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add @libs-ui/components-buttons-group
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Sử dụng
|
|
28
|
+
|
|
29
|
+
### Inline Template
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { Component } from '@angular/core';
|
|
33
|
+
import { LibsUiComponentsButtonsGroupComponent } from '@libs-ui/components-buttons-group';
|
|
34
|
+
|
|
35
|
+
@Component({
|
|
36
|
+
selector: 'app-example',
|
|
37
|
+
standalone: true,
|
|
38
|
+
imports: [LibsUiComponentsButtonsGroupComponent],
|
|
39
|
+
template: `
|
|
40
|
+
<libs_ui-components-buttons-group
|
|
41
|
+
[buttons]="buttons"
|
|
42
|
+
[(indexActive)]="activeIndex"
|
|
43
|
+
(outChange)="onChange($event)">
|
|
44
|
+
</libs_ui-components-buttons-group>
|
|
45
|
+
`
|
|
46
|
+
})
|
|
47
|
+
export class ExampleComponent {
|
|
48
|
+
buttons = [
|
|
49
|
+
{ key: '1', label: 'Option 1' },
|
|
50
|
+
{ key: '2', label: 'Option 2' },
|
|
51
|
+
{ key: '3', label: 'Option 3' }
|
|
52
|
+
];
|
|
53
|
+
activeIndex = 0;
|
|
54
|
+
onChange(button: any) {
|
|
55
|
+
console.log('Changed:', button);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### File HTML riêng
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
import { Component } from '@angular/core';
|
|
64
|
+
import { LibsUiComponentsButtonsGroupComponent } from '@libs-ui/components-buttons-group';
|
|
65
|
+
|
|
66
|
+
@Component({
|
|
67
|
+
selector: 'app-example',
|
|
68
|
+
standalone: true,
|
|
69
|
+
imports: [LibsUiComponentsButtonsGroupComponent],
|
|
70
|
+
templateUrl: './example.component.html'
|
|
71
|
+
})
|
|
72
|
+
export class ExampleComponent {
|
|
73
|
+
buttons = [ /* ... */ ];
|
|
74
|
+
activeIndex = 0;
|
|
75
|
+
onChange(button: any) { }
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<libs_ui-components-buttons-group
|
|
81
|
+
[buttons]="buttons"
|
|
82
|
+
[(indexActive)]="activeIndex"
|
|
83
|
+
(outChange)="onChange($event)">
|
|
84
|
+
</libs_ui-components-buttons-group>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Công nghệ sử dụng
|
|
88
|
+
|
|
89
|
+
- **Angular 18** với standalone components và Signals
|
|
90
|
+
- **Tailwind CSS** 3.x (phong cách demo)
|
|
91
|
+
|
|
92
|
+
## API Reference
|
|
93
|
+
|
|
94
|
+
### Inputs
|
|
95
|
+
|
|
96
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
97
|
+
|--------------|------------------|----------|------------------------------------------|
|
|
98
|
+
| buttons | `Array<IButton>` | required | Mảng các nút sẽ hiển thị trong nhóm. |
|
|
99
|
+
| indexActive | `number` | `0` | Chỉ số của nút đang được chọn (từ 0). |
|
|
100
|
+
| disable | `boolean` | `false` | Nếu true: vô hiệu hóa toàn bộ nhóm nút. |
|
|
101
|
+
|
|
102
|
+
### Outputs
|
|
103
|
+
|
|
104
|
+
| Tên | Kiểu | Mô tả |
|
|
105
|
+
|--------------------|-----------------------------------|--------------------------------------------|
|
|
106
|
+
| outChange | `(button: IButton) => void` | Trả về nút vừa được chọn. |
|
|
107
|
+
| outFunctionsControl| `IPopoverFunctionControlEvent` | Cung cấp API để điều khiển popover. |
|
|
108
|
+
|
|
109
|
+
### Interfaces
|
|
110
|
+
|
|
111
|
+
#### `IButton`
|
|
112
|
+
| Property | Type | Required | Description |
|
|
113
|
+
|---------------|-----------------------|----------|---------------------------------------------------|
|
|
114
|
+
| key | `string` | no | Khóa định danh của nút (unique). |
|
|
115
|
+
| type | `TYPE_BUTTON` | no | Kiểu giao diện của nút (primary, secondary...). |
|
|
116
|
+
| sizeButton | `TYPE_SIZE_BUTTON` | no | Kích thước của nút (nhỏ, trung, lớn). |
|
|
117
|
+
| iconOnlyType | `boolean` | no | Nếu true: chỉ hiện icon, không hiện nhãn. |
|
|
118
|
+
| label | `string` | no | Văn bản hiển thị trên nút. |
|
|
119
|
+
| disable | `boolean` | no | Vô hiệu hóa nút khi true. |
|
|
120
|
+
| classInclude | `string` | no | Class CSS thêm cho container của nút. |
|
|
121
|
+
| classIconLeft | `string` | no | Class CSS thêm cho icon bên trái. |
|
|
122
|
+
| classIconRight| `string` | no | Class CSS thêm cho icon bên phải. |
|
|
123
|
+
| classLabel | `string` | no | Class CSS thêm cho nhãn. |
|
|
124
|
+
| popover | `IPopover` | no | Cấu hình popover cho nút (nếu cần). |
|
|
125
|
+
|
|
126
|
+
#### `IPopoverFunctionControlEvent`
|
|
127
|
+
| Property | Type | Required | Description |
|
|
128
|
+
|----------|---------|----------|--------------------------------------------------------|
|
|
129
|
+
| ... | ... | ... | Xem `@libs-ui/components-popover` để biết chi tiết. |
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-group",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.281",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": "^18.2.0",
|
|
6
|
-
"@libs-ui/components-buttons-button": "
|
|
7
|
-
"@libs-ui/components-popover": "
|
|
6
|
+
"@libs-ui/components-buttons-button": "0.2.281",
|
|
7
|
+
"@libs-ui/components-popover": "0.2.281",
|
|
8
8
|
"@ngx-translate/core": "^15.0.0"
|
|
9
9
|
},
|
|
10
10
|
"sideEffects": false,
|