@libs-ui/components-switch 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 +162 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,163 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Switch
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-switch` là component Toggle Switch cho Angular, cho phép người dùng bật/tắt một tùy chọn với trạng thái hai chiều và sự kiện revert.
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Kích thước: `'default'` | `'large'`
|
|
10
|
+
- Hỗ trợ vô hiệu hóa switch (`disable`)
|
|
11
|
+
- Two-way binding cho trạng thái `active`
|
|
12
|
+
- Phát ra sự kiện `outSwitch` với payload `{ active: boolean; revert: () => Promise<void> }`
|
|
13
|
+
|
|
14
|
+
## Cài đặt
|
|
15
|
+
|
|
16
|
+
### Yêu cầu
|
|
17
|
+
|
|
18
|
+
- Angular 18.0.0 trở lên
|
|
19
|
+
- Tailwind CSS 3.3.0 trở lên
|
|
20
|
+
|
|
21
|
+
Để cài đặt, sử dụng npm hoặc yarn:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @libs-ui/components-switch
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
hoặc
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add @libs-ui/components-switch
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Sử dụng
|
|
34
|
+
|
|
35
|
+
### Inline Template
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { Component } from '@angular/core';
|
|
39
|
+
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
40
|
+
|
|
41
|
+
@Component({
|
|
42
|
+
selector: 'app-example',
|
|
43
|
+
standalone: true,
|
|
44
|
+
imports: [LibsUiComponentsSwitchComponent],
|
|
45
|
+
template: `
|
|
46
|
+
<libs_ui-components-switch
|
|
47
|
+
[size]="'large'"
|
|
48
|
+
[disable]="false"
|
|
49
|
+
[(active)]="isOn"
|
|
50
|
+
(outSwitch)="onSwitch($event)">
|
|
51
|
+
</libs_ui-components-switch>
|
|
52
|
+
`
|
|
53
|
+
})
|
|
54
|
+
export class ExampleComponent {
|
|
55
|
+
isOn = false;
|
|
56
|
+
|
|
57
|
+
onSwitch(event: { active: boolean; revert: () => Promise<void> }) {
|
|
58
|
+
console.log('Switch toggled:', event.active);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### File HTML riêng
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
import { Component } from '@angular/core';
|
|
67
|
+
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
68
|
+
|
|
69
|
+
@Component({
|
|
70
|
+
selector: 'app-example',
|
|
71
|
+
standalone: true,
|
|
72
|
+
imports: [LibsUiComponentsSwitchComponent],
|
|
73
|
+
templateUrl: './example.component.html'
|
|
74
|
+
})
|
|
75
|
+
export class ExampleComponent {
|
|
76
|
+
isOn = true;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<libs_ui-components-switch
|
|
82
|
+
[size]="'default'"
|
|
83
|
+
[disable]="false"
|
|
84
|
+
[(active)]="isOn"
|
|
85
|
+
(outSwitch)="onSwitch($event)">
|
|
86
|
+
</libs_ui-components-switch>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Công nghệ sử dụng
|
|
90
|
+
|
|
91
|
+
- **Angular 18**: standalone components, Signals
|
|
92
|
+
- **Tailwind CSS**: cho styling
|
|
93
|
+
|
|
94
|
+
## API Reference
|
|
95
|
+
|
|
96
|
+
### Inputs
|
|
97
|
+
|
|
98
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
99
|
+
|---------|----------------------------|-------------|--------------------------------------------------------------|
|
|
100
|
+
| size | `'default' \| 'large'` | `'default'` | Kích thước của switch |
|
|
101
|
+
| disable | `boolean` | `false` | Vô hiệu hóa switch |
|
|
102
|
+
| active | `boolean` | `false` | Trạng thái bật/tắt (two-way binding) |
|
|
103
|
+
|
|
104
|
+
### Outputs
|
|
105
|
+
|
|
106
|
+
| Tên | Kiểu | Mô tả |
|
|
107
|
+
|-----------|----------------------------------------|-----------------------------------------------------------|
|
|
108
|
+
| outSwitch | `(event: ISwitchEvent) => void` | Sự kiện khi toggle, trả về trạng thái và hàm `revert` |
|
|
109
|
+
|
|
110
|
+
### Interfaces
|
|
111
|
+
|
|
112
|
+
#### `ISwitch`
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
export interface ISwitch {
|
|
116
|
+
disable?: boolean;
|
|
117
|
+
active?: boolean;
|
|
118
|
+
action?: (event: ISwitchEvent) => Promise<void>;
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Mô tả cấu hình switch (inputs):
|
|
123
|
+
- `disable`: vô hiệu hóa switch.
|
|
124
|
+
- `active`: trạng thái bật/tắt.
|
|
125
|
+
- `action`: hàm xử lý khi toggle (tùy chọn).
|
|
126
|
+
|
|
127
|
+
#### `ISwitchEvent`
|
|
128
|
+
|
|
129
|
+
```typescript
|
|
130
|
+
export interface ISwitchEvent {
|
|
131
|
+
active: boolean;
|
|
132
|
+
revert: () => Promise<void>;
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
Mô tả payload của sự kiện `outSwitch`:
|
|
137
|
+
- `active`: trạng thái mới.
|
|
138
|
+
- `revert`: hàm để hoàn nguyên về trạng thái trước đó.
|
|
139
|
+
|
|
140
|
+
## Demo
|
|
141
|
+
|
|
142
|
+
Để xem ví dụ tương tác về component Switch, bạn có thể sử dụng `LibsUiComponentsSwitchDemoComponent` trong ứng dụng của mình:
|
|
143
|
+
|
|
144
|
+
```typescript
|
|
145
|
+
import { Component } from '@angular/core';
|
|
146
|
+
import { LibsUiComponentsSwitchDemoComponent } from '@libs-ui/components-switch';
|
|
147
|
+
|
|
148
|
+
@Component({
|
|
149
|
+
selector: 'app-switch-demo',
|
|
150
|
+
standalone: true,
|
|
151
|
+
imports: [LibsUiComponentsSwitchDemoComponent],
|
|
152
|
+
template: `
|
|
153
|
+
<lib-switch-demo></lib-switch-demo>
|
|
154
|
+
`
|
|
155
|
+
})
|
|
156
|
+
export class SwitchDemoComponent {}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
Hoặc thêm trực tiếp trong template HTML:
|
|
160
|
+
|
|
161
|
+
```html
|
|
162
|
+
<lib-switch-demo></lib-switch-demo>
|
|
163
|
+
```
|