@libs-ui/components-skeleton 0.2.355-13 → 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 +149 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,150 @@
|
|
|
1
|
-
# skeleton
|
|
1
|
+
# @libs-ui/components-skeleton
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component hiển thị hiệu ứng loading (skeleton) cho các thành phần giao diện chưa có dữ liệu.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsSkeletonComponent` là một standalone Angular component giúp tạo ra các khung xương (skeleton) loading với hiệu ứng shimmer. Component hỗ trợ cấu hình linh hoạt cho phép tạo ra các layout phức tạp như danh sách, lưới, hoặc thẻ bài viết.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ Hiệu ứng Shimmer Loading mượt mà
|
|
12
|
+
- ✅ Tính toán tự động số lượng items dựa trên height container
|
|
13
|
+
- ✅ Hỗ trợ cấu hình Layout phức tạp (Rows & Cols nested)
|
|
14
|
+
- ✅ Custom Styles & Classes cho từng phần tử
|
|
15
|
+
- ✅ Tối ưu hiệu năng với `ChangeDetectionStrategy.OnPush`
|
|
16
|
+
|
|
17
|
+
## Khi nào sử dụng
|
|
18
|
+
|
|
19
|
+
- Khi đang tải dữ liệu từ API và muốn hiển thị cấu trúc trang trước.
|
|
20
|
+
- Thay thế cho loading spinner truyền thống để cải thiện trải nghiệm người dùng (Perceived Performance).
|
|
21
|
+
- Sử dụng trong các danh sách, bảng, hoặc chi tiết nội dung.
|
|
22
|
+
|
|
23
|
+
## Cài đặt
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# npm
|
|
27
|
+
npm install @libs-ui/components-skeleton
|
|
28
|
+
|
|
29
|
+
# yarn
|
|
30
|
+
yarn add @libs-ui/components-skeleton
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Import
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
import { LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton';
|
|
37
|
+
|
|
38
|
+
@Component({
|
|
39
|
+
standalone: true,
|
|
40
|
+
imports: [LibsUiComponentsSkeletonComponent],
|
|
41
|
+
// ...
|
|
42
|
+
})
|
|
43
|
+
export class YourComponent {}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Ví dụ
|
|
47
|
+
|
|
48
|
+
### Basic (Tự động tính toán)
|
|
49
|
+
|
|
50
|
+
Component sẽ tự động tính toán số lượng dòng dựa trên chiều cao của container cha.
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<div class="h-[200px] w-full">
|
|
54
|
+
<libs_ui-components-skeleton />
|
|
55
|
+
</div>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Custom Layout (Card Example)
|
|
59
|
+
|
|
60
|
+
Cấu hình để tạo ra skeleton giống một card (Avatar + Text).
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
const cardConfig: ISkeletonConfig = {
|
|
64
|
+
repeat: 1,
|
|
65
|
+
rows: [
|
|
66
|
+
{
|
|
67
|
+
classRow: 'flex gap-4 p-4 border rounded shadow-sm',
|
|
68
|
+
cols: [
|
|
69
|
+
// Avatar Column
|
|
70
|
+
{
|
|
71
|
+
item: { classIncludeItem: 'w-12 h-12 rounded-full' },
|
|
72
|
+
},
|
|
73
|
+
// Text Column
|
|
74
|
+
{
|
|
75
|
+
classCol: 'flex-1 flex flex-col gap-2 justify-center',
|
|
76
|
+
item: { classIncludeItem: 'h-4 w-3/4 rounded' },
|
|
77
|
+
cols: [{ item: { classIncludeItem: 'h-3 w-1/2 rounded' } }],
|
|
78
|
+
},
|
|
79
|
+
],
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
};
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<libs_ui-components-skeleton [config]="cardConfig" />
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## API
|
|
90
|
+
|
|
91
|
+
### LibsUiComponentsSkeletonComponent
|
|
92
|
+
|
|
93
|
+
Selector: `libs_ui-components-skeleton`
|
|
94
|
+
|
|
95
|
+
#### Inputs
|
|
96
|
+
|
|
97
|
+
| Property | Type | Default | Description |
|
|
98
|
+
| ---------- | ----------------- | ------- | ----------------------------- |
|
|
99
|
+
| `[config]` | `ISkeletonConfig` | `{}` | Cấu hình layout cho skeleton. |
|
|
100
|
+
|
|
101
|
+
### Interfaces
|
|
102
|
+
|
|
103
|
+
#### ISkeletonConfig
|
|
104
|
+
|
|
105
|
+
```typescript
|
|
106
|
+
export interface ISkeletonConfig {
|
|
107
|
+
repeat?: number; // Số lần lặp lại toàn bộ structure
|
|
108
|
+
heightContainer?: number; // Chiều cao cố định cho mỗi block
|
|
109
|
+
classRows?: string; // Class cho container của rows
|
|
110
|
+
styleMarginBottom?: number; // Margin bottom giữa các items (px)
|
|
111
|
+
rows?: Array<{
|
|
112
|
+
repeat?: number; // Số lần lặp lại row
|
|
113
|
+
classRow?: string; // Class cho row
|
|
114
|
+
classRowLast?: string; // Class cho row cuối cùng
|
|
115
|
+
item?: ISkeletonItem; // Config cho item trong row (nếu có)
|
|
116
|
+
classCols?: string; // Class cho container của cols
|
|
117
|
+
classColsLast?: string; // Class cho container cols cuối
|
|
118
|
+
cols?: Array<{
|
|
119
|
+
repeat?: number; // Số lần lặp lại col
|
|
120
|
+
classCol?: string; // Class cho col
|
|
121
|
+
classColLast?: string; // Class cho col cuối
|
|
122
|
+
item?: ISkeletonItem; // Config cho item trong col
|
|
123
|
+
}>;
|
|
124
|
+
}>;
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
#### ISkeletonItem
|
|
129
|
+
|
|
130
|
+
```typescript
|
|
131
|
+
interface ISkeletonItem {
|
|
132
|
+
classIncludeItem?: string; // Class áp dụng trực tiếp lên skeleton div (bg, animation)
|
|
133
|
+
classInclude?: string; // Class áp dụng lên wrapper của skeleton item
|
|
134
|
+
class?: string; // (Legacy)
|
|
135
|
+
styleDefault?: boolean; // Nếu true, thêm margin-bottom default (16px) trừ item cuối
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## Styling
|
|
140
|
+
|
|
141
|
+
Component sử dụng CSS Animation `mo-skeleton-loading` và linear-gradient background để tạo hiệu ứng shimmer.
|
|
142
|
+
Mặc định skeleton sẽ fill size của container cha (`w-full h-full`).
|
|
143
|
+
|
|
144
|
+
## Demo
|
|
145
|
+
|
|
146
|
+
```bash
|
|
147
|
+
npx nx serve core-ui
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
Truy cập: `http://localhost:4500/skeleton`
|