@libs-ui/components-switch 0.2.355-9 → 0.2.356-0
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 +74 -106
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,163 +1,131 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-switch
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component chuyển đổi trạng thái (On/Off) dạng Switch (Toggle).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
`LibsUiComponentsSwitchComponent` là một standalone Angular component cung cấp giao diện Switch Button. Component hỗ trợ 2 kích thước, trạng thái disable và hỗ trợ binding hai chiều (model) cho trạng thái active.
|
|
8
8
|
|
|
9
|
-
|
|
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> }`
|
|
9
|
+
### Tính năng
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
- ✅ 2 kích thước: Default và Large
|
|
12
|
+
- ✅ Hỗ trợ trạng thái Disabled
|
|
13
|
+
- ✅ Two-way binding với Signals (`active`)
|
|
14
|
+
- ✅ Event output chi tiết (kèm hàm revert để hoàn tác)
|
|
15
|
+
- ✅ Custom Styling với CSS Variable
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
## Khi nào sử dụng
|
|
17
18
|
|
|
18
|
-
-
|
|
19
|
-
-
|
|
19
|
+
- Khi người dùng cần chuyển đổi nhanh giữa hai trạng thái (Bật/Tắt).
|
|
20
|
+
- Thay thế cho Checkbox khi muốn thể hiện hành động có hiệu lực tức thì.
|
|
21
|
+
- Trong các trang cài đặt hệ thống, kích hoạt tính năng.
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
## Cài đặt
|
|
22
24
|
|
|
23
25
|
```bash
|
|
26
|
+
# npm
|
|
24
27
|
npm install @libs-ui/components-switch
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
hoặc
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
# yarn
|
|
30
30
|
yarn add @libs-ui/components-switch
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
##
|
|
34
|
-
|
|
35
|
-
### Inline Template
|
|
33
|
+
## Import
|
|
36
34
|
|
|
37
35
|
```typescript
|
|
38
|
-
import { Component } from '@angular/core';
|
|
39
36
|
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
40
37
|
|
|
41
38
|
@Component({
|
|
42
|
-
selector: 'app-example',
|
|
43
39
|
standalone: true,
|
|
44
40
|
imports: [LibsUiComponentsSwitchComponent],
|
|
45
|
-
|
|
46
|
-
<libs_ui-components-switch
|
|
47
|
-
[size]="'large'"
|
|
48
|
-
[disable]="false"
|
|
49
|
-
[(active)]="isOn"
|
|
50
|
-
(outSwitch)="onSwitch($event)"></libs_ui-components-switch>
|
|
51
|
-
`,
|
|
41
|
+
// ...
|
|
52
42
|
})
|
|
53
|
-
export class
|
|
54
|
-
isOn = false;
|
|
55
|
-
|
|
56
|
-
onSwitch(event: { active: boolean; revert: () => Promise<void> }) {
|
|
57
|
-
console.log('Switch toggled:', event.active);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
43
|
+
export class YourComponent {}
|
|
60
44
|
```
|
|
61
45
|
|
|
62
|
-
|
|
46
|
+
## Ví dụ
|
|
63
47
|
|
|
64
|
-
|
|
65
|
-
import { Component } from '@angular/core';
|
|
66
|
-
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
48
|
+
### Basic (Default Size)
|
|
67
49
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
standalone: true,
|
|
71
|
-
imports: [LibsUiComponentsSwitchComponent],
|
|
72
|
-
templateUrl: './example.component.html',
|
|
73
|
-
})
|
|
74
|
-
export class ExampleComponent {
|
|
75
|
-
isOn = true;
|
|
76
|
-
}
|
|
50
|
+
```html
|
|
51
|
+
<libs_ui-components-switch [(active)]="isActive" />
|
|
77
52
|
```
|
|
78
53
|
|
|
54
|
+
### Large Size
|
|
55
|
+
|
|
79
56
|
```html
|
|
80
57
|
<libs_ui-components-switch
|
|
81
|
-
|
|
82
|
-
[
|
|
83
|
-
[(active)]="isOn"
|
|
84
|
-
(outSwitch)="onSwitch($event)"></libs_ui-components-switch>
|
|
58
|
+
size="large"
|
|
59
|
+
[(active)]="isActive" />
|
|
85
60
|
```
|
|
86
61
|
|
|
87
|
-
|
|
62
|
+
### Disabled State
|
|
88
63
|
|
|
89
|
-
|
|
90
|
-
-
|
|
64
|
+
```html
|
|
65
|
+
<libs_ui-components-switch
|
|
66
|
+
[disable]="true"
|
|
67
|
+
[active]="true" />
|
|
68
|
+
```
|
|
91
69
|
|
|
92
|
-
|
|
70
|
+
### Handling Change Event
|
|
93
71
|
|
|
94
|
-
|
|
72
|
+
Sử dụng `(outSwitch)` để xử lý sự kiện active thay đổi. Event cung cấp hàm `revert()` để quay lại trạng thái cũ nếu cần (ví dụ: API call thất bại).
|
|
95
73
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
| disable | `boolean` | `false` | Vô hiệu hóa switch |
|
|
100
|
-
| active | `boolean` | `false` | Trạng thái bật/tắt (two-way binding) |
|
|
74
|
+
```html
|
|
75
|
+
<libs_ui-components-switch (outSwitch)="onSwitchChange($event)" />
|
|
76
|
+
```
|
|
101
77
|
|
|
102
|
-
|
|
78
|
+
```typescript
|
|
79
|
+
onSwitchChange(event: ISwitchEvent) {
|
|
80
|
+
console.log('New state:', event.active);
|
|
81
|
+
// Nếu muốn hoàn tác:
|
|
82
|
+
// event.revert();
|
|
83
|
+
}
|
|
84
|
+
```
|
|
103
85
|
|
|
104
|
-
|
|
105
|
-
| --------- | ------------------------------- | ----------------------------------------------------- |
|
|
106
|
-
| outSwitch | `(event: ISwitchEvent) => void` | Sự kiện khi toggle, trả về trạng thái và hàm `revert` |
|
|
86
|
+
## API
|
|
107
87
|
|
|
108
|
-
###
|
|
88
|
+
### LibsUiComponentsSwitchComponent
|
|
109
89
|
|
|
110
|
-
|
|
90
|
+
Selector: `libs_ui-components-switch`
|
|
111
91
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
92
|
+
#### Inputs
|
|
93
|
+
|
|
94
|
+
| Property | Type | Default | Description |
|
|
95
|
+
| ------------ | ---------------------- | ----------- | --------------------------------------------- |
|
|
96
|
+
| `[size]` | `'default' \| 'large'` | `'default'` | Kích thước của switch. |
|
|
97
|
+
| `[disable]` | `boolean` | `false` | Vô hiệu hóa switch (không thể click). |
|
|
98
|
+
| `[(active)]` | `boolean` | `false` | Trạng thái bật/tắt của switch (Model Signal). |
|
|
119
99
|
|
|
120
|
-
|
|
100
|
+
#### Outputs
|
|
121
101
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
102
|
+
| Property | Type | Description |
|
|
103
|
+
| ------------- | -------------- | ------------------------------------------------- |
|
|
104
|
+
| `(outSwitch)` | `ISwitchEvent` | Emit khi người dùng click để thay đổi trạng thái. |
|
|
105
|
+
|
|
106
|
+
### Interfaces
|
|
125
107
|
|
|
126
|
-
####
|
|
108
|
+
#### ISwitchEvent
|
|
127
109
|
|
|
128
110
|
```typescript
|
|
129
111
|
export interface ISwitchEvent {
|
|
130
|
-
active: boolean;
|
|
131
|
-
revert: () => Promise<void>;
|
|
112
|
+
active: boolean; // Trạng thái mới sau khi click
|
|
113
|
+
revert: () => Promise<void>; // Hàm utility để quay về trạng thái cũ
|
|
132
114
|
}
|
|
133
115
|
```
|
|
134
116
|
|
|
135
|
-
|
|
117
|
+
## Styling
|
|
136
118
|
|
|
137
|
-
|
|
138
|
-
- `revert`: hàm để hoàn nguyên về trạng thái trước đó.
|
|
119
|
+
Component sử dụng CSS Variables để tùy biến màu sắc:
|
|
139
120
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
121
|
+
| Variable | Default | Description |
|
|
122
|
+
| ------------------------- | ---------------- | ------------------- |
|
|
123
|
+
| `--libs-ui-color-default` | `#226ff5` (Blue) | Màu nền khi active. |
|
|
143
124
|
|
|
144
|
-
|
|
145
|
-
import { Component } from '@angular/core';
|
|
146
|
-
import { LibsUiComponentsSwitchDemoComponent } from '@libs-ui/components-switch';
|
|
125
|
+
## Demo
|
|
147
126
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
standalone: true,
|
|
151
|
-
imports: [LibsUiComponentsSwitchDemoComponent],
|
|
152
|
-
template: `
|
|
153
|
-
<lib-switch-demo></lib-switch-demo>
|
|
154
|
-
`,
|
|
155
|
-
})
|
|
156
|
-
export class SwitchDemoComponent {}
|
|
127
|
+
```bash
|
|
128
|
+
npx nx serve core-ui
|
|
157
129
|
```
|
|
158
130
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
```html
|
|
162
|
-
<lib-switch-demo></lib-switch-demo>
|
|
163
|
-
```
|
|
131
|
+
Truy cập: `http://localhost:4500/switch`
|