@libs-ui/components-switch 0.2.355-14 → 0.2.355-15
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 +131 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# @libs-ui/components-switch
|
|
2
|
+
|
|
3
|
+
> Component chuyển đổi trạng thái (On/Off) dạng Switch (Toggle).
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
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
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
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
|
|
16
|
+
|
|
17
|
+
## Khi nào sử dụng
|
|
18
|
+
|
|
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.
|
|
22
|
+
|
|
23
|
+
## Cài đặt
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# npm
|
|
27
|
+
npm install @libs-ui/components-switch
|
|
28
|
+
|
|
29
|
+
# yarn
|
|
30
|
+
yarn add @libs-ui/components-switch
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Import
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
37
|
+
|
|
38
|
+
@Component({
|
|
39
|
+
standalone: true,
|
|
40
|
+
imports: [LibsUiComponentsSwitchComponent],
|
|
41
|
+
// ...
|
|
42
|
+
})
|
|
43
|
+
export class YourComponent {}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Ví dụ
|
|
47
|
+
|
|
48
|
+
### Basic (Default Size)
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<libs_ui-components-switch [(active)]="isActive" />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Large Size
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<libs_ui-components-switch
|
|
58
|
+
size="large"
|
|
59
|
+
[(active)]="isActive" />
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Disabled State
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<libs_ui-components-switch
|
|
66
|
+
[disable]="true"
|
|
67
|
+
[active]="true" />
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Handling Change Event
|
|
71
|
+
|
|
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).
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<libs_ui-components-switch (outSwitch)="onSwitchChange($event)" />
|
|
76
|
+
```
|
|
77
|
+
|
|
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
|
+
```
|
|
85
|
+
|
|
86
|
+
## API
|
|
87
|
+
|
|
88
|
+
### LibsUiComponentsSwitchComponent
|
|
89
|
+
|
|
90
|
+
Selector: `libs_ui-components-switch`
|
|
91
|
+
|
|
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). |
|
|
99
|
+
|
|
100
|
+
#### Outputs
|
|
101
|
+
|
|
102
|
+
| Property | Type | Description |
|
|
103
|
+
| ------------- | -------------- | ------------------------------------------------- |
|
|
104
|
+
| `(outSwitch)` | `ISwitchEvent` | Emit khi người dùng click để thay đổi trạng thái. |
|
|
105
|
+
|
|
106
|
+
### Interfaces
|
|
107
|
+
|
|
108
|
+
#### ISwitchEvent
|
|
109
|
+
|
|
110
|
+
```typescript
|
|
111
|
+
export interface ISwitchEvent {
|
|
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ũ
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Styling
|
|
118
|
+
|
|
119
|
+
Component sử dụng CSS Variables để tùy biến màu sắc:
|
|
120
|
+
|
|
121
|
+
| Variable | Default | Description |
|
|
122
|
+
| ------------------------- | ---------------- | ------------------- |
|
|
123
|
+
| `--libs-ui-color-default` | `#226ff5` (Blue) | Màu nền khi active. |
|
|
124
|
+
|
|
125
|
+
## Demo
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
npx nx serve core-ui
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
Truy cập: `http://localhost:4500/switch`
|