@libs-ui/components-spinner 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 +118 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,119 @@
|
|
|
1
|
-
# spinner
|
|
1
|
+
# @libs-ui/components-spinner
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component hiển thị hiệu ứng loading (spinner) đơn giản, nhẹ nhàng.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsSpinnerComponent` là một standalone Angular component hiển thị spinner loading với hiệu ứng xoay, hỗ trợ các kích thước và màu sắc khác nhau. Component đặc biệt hữu ích cho việc hiển thị trạng thái loading cục bộ hoặc loading toàn màn hình (với chế độ absolute).
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ Hiệu ứng xoay mượt mà (Conic Gradient Animation)
|
|
12
|
+
- ✅ 4 kích thước chuẩn: Large (64px), Medium (20px), Small (16px), Smaller (12px)
|
|
13
|
+
- ✅ 2 chế độ màu: Blue, White
|
|
14
|
+
- ✅ 2 chế độ vị trí: Normal (flow), Absolute (centered)
|
|
15
|
+
|
|
16
|
+
## Khi nào sử dụng
|
|
17
|
+
|
|
18
|
+
- Khi đang tải dữ liệu cục bộ (trong button, card, input).
|
|
19
|
+
- Khi đang tải dữ liệu toàn trang hoặc modal (overlay).
|
|
20
|
+
- Thay thế cho text "Loading..." để tiết kiệm diện tích và tăng tính thẩm mỹ.
|
|
21
|
+
|
|
22
|
+
## Cài đặt
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# npm
|
|
26
|
+
npm install @libs-ui/components-spinner
|
|
27
|
+
|
|
28
|
+
# yarn
|
|
29
|
+
yarn add @libs-ui/components-spinner
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Import
|
|
33
|
+
|
|
34
|
+
```typescript
|
|
35
|
+
import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
|
|
36
|
+
|
|
37
|
+
@Component({
|
|
38
|
+
standalone: true,
|
|
39
|
+
imports: [LibsUiComponentsSpinnerComponent],
|
|
40
|
+
// ...
|
|
41
|
+
})
|
|
42
|
+
export class YourComponent {}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Ví dụ
|
|
46
|
+
|
|
47
|
+
### Basic (Default)
|
|
48
|
+
|
|
49
|
+
Mặc định là `medium` size và `spin-absolute-blue`.
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<libs_ui-components-spinner />
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Inline Spinner (Trong Button)
|
|
56
|
+
|
|
57
|
+
Sử dụng `type="spin-white"` và `size="smaller"` hoặc `size="small"`.
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<button class="btn btn-primary flex items-center gap-2">
|
|
61
|
+
<libs_ui-components-spinner
|
|
62
|
+
type="spin-white"
|
|
63
|
+
size="small" />
|
|
64
|
+
<span>Loading...</span>
|
|
65
|
+
</button>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Overlay/Absolute Spinner
|
|
69
|
+
|
|
70
|
+
Sử dụng `type="spin-absolute-blue"` để căn giữa container (Container cần có `position: relative`).
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<div class="relative w-full h-[200px] border">
|
|
74
|
+
<libs_ui-components-spinner
|
|
75
|
+
type="spin-absolute-blue"
|
|
76
|
+
size="large" />
|
|
77
|
+
</div>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## API
|
|
81
|
+
|
|
82
|
+
### LibsUiComponentsSpinnerComponent
|
|
83
|
+
|
|
84
|
+
Selector: `libs_ui-components-spinner`
|
|
85
|
+
|
|
86
|
+
#### Inputs
|
|
87
|
+
|
|
88
|
+
| Property | Type | Default | Description |
|
|
89
|
+
| -------- | --------------------------------------------- | ---------------------- | ---------------------------------- |
|
|
90
|
+
| `[type]` | `TYPE_SPINNER` | `'spin-absolute-blue'` | Kiểu hiển thị (màu sắc và vị trí). |
|
|
91
|
+
| `[size]` | `'large' \| 'medium' \| 'small' \| 'smaller'` | `'medium'` | Kích thước của spinner. |
|
|
92
|
+
|
|
93
|
+
### Types
|
|
94
|
+
|
|
95
|
+
#### TYPE_SPINNER
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
export type TYPE_SPINNER =
|
|
99
|
+
| 'spin-absolute-blue' // Căn giữa tuyệt đối, màu xanh
|
|
100
|
+
| 'spin-absolute-white' // Căn giữa tuyệt đối, màu trắng
|
|
101
|
+
| 'spin-blue' // Normal flow, màu xanh
|
|
102
|
+
| 'spin-white'; // Normal flow, màu trắng
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Styling
|
|
106
|
+
|
|
107
|
+
Component sử dụng CSS `conic-gradient` và `mask` để tạo hình dạng spinner, giúp nó nhẹ và mượt mà trên các trình duyệt hiện đại.
|
|
108
|
+
|
|
109
|
+
## Lưu ý (Caveats)
|
|
110
|
+
|
|
111
|
+
⚠️ **Reactivity**: Hiện tại kích thước (`size`) chỉ được tính toán một lần tại thời điểm khởi tạo (`ngOnInit`). Việc thay đổi input `size` sau khi component đã render sẽ **không** cập nhật kích thước spinner. Nếu cần thay đổi size động, hãy sử dụng `*ngIf` để re-create component.
|
|
112
|
+
|
|
113
|
+
## Demo
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
npx nx serve core-ui
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Truy cập: `http://localhost:4500/spinner`
|