@edmicro/olkit 1.0.1 → 1.0.4
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 +21 -28
- package/fesm2022/edmicro-olkit.mjs +7207 -369
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/olkit.css +1 -1
- package/package.json +1 -1
- package/types/edmicro-olkit.d.ts +973 -89
- package/types/edmicro-olkit.d.ts.map +1 -1
- package/version.txt +2 -2
package/README.md
CHANGED
|
@@ -31,15 +31,9 @@ yarn add @edmicro/olkit
|
|
|
31
31
|
|
|
32
32
|
## 🎨 2. Cấu hình Styles
|
|
33
33
|
|
|
34
|
-
###
|
|
35
|
-
|
|
34
|
+
### Cách 1: Cấu hình qua `angular.json` (Khuyên dùng - Hoạt động ổn định trên mọi dự án)
|
|
35
|
+
Thêm file `olkit.css` vào mục `styles` trong `angular.json`:
|
|
36
36
|
|
|
37
|
-
**Cách 1: Thêm vào `src/styles.css` (hoặc `styles.scss`)**
|
|
38
|
-
```css
|
|
39
|
-
@import '@edmicro/olkit/olkit.css';
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
**Cách 2: Thêm vào `angular.json`**
|
|
43
37
|
```json
|
|
44
38
|
"architect": {
|
|
45
39
|
"build": {
|
|
@@ -52,17 +46,31 @@ Chỉ cần thêm file `olkit.css` vào file CSS chính của dự án hoặc tr
|
|
|
52
46
|
}
|
|
53
47
|
}
|
|
54
48
|
```
|
|
49
|
+
> ⚠️ **Lưu ý:** Sau khi sửa file `angular.json`, hãy **khởi động lại dev server** (`Ctrl + C` và chạy lại `ng serve` / `bun start`) để Angular nạp stylesheet mới.
|
|
55
50
|
|
|
56
51
|
---
|
|
57
52
|
|
|
58
|
-
###
|
|
59
|
-
|
|
53
|
+
### Cách 2: Cấu hình trực tiếp trong file CSS / SCSS
|
|
54
|
+
|
|
55
|
+
#### **Trường hợp A: Dự án KHÔNG sử dụng Tailwind CSS**
|
|
56
|
+
Trong file `src/styles.scss` (hoặc `src/styles.css`):
|
|
57
|
+
```scss
|
|
58
|
+
@import "@edmicro/olkit/olkit.css";
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
#### **Trường hợp B: Dự án CÓ sử dụng Tailwind CSS v4**
|
|
62
|
+
Trong file `src/styles.css`, cần thêm directive `@source` để Tailwind quét và không loại bỏ (purge) các class của thư viện:
|
|
60
63
|
```css
|
|
61
64
|
@import "tailwindcss";
|
|
65
|
+
|
|
66
|
+
/* Khai báo để Tailwind v4 quét mã nguồn trong thư viện */
|
|
67
|
+
@source "../node_modules/@edmicro/olkit";
|
|
68
|
+
|
|
62
69
|
@import "@edmicro/olkit/olkit.css";
|
|
63
70
|
```
|
|
64
71
|
|
|
65
|
-
|
|
72
|
+
#### **Trường hợp C: Dự án CÓ sử dụng Tailwind CSS v3**
|
|
73
|
+
Thêm đường dẫn quét `node_modules` vào `content` trong file `tailwind.config.js`:
|
|
66
74
|
```js
|
|
67
75
|
module.exports = {
|
|
68
76
|
content: [
|
|
@@ -70,27 +78,12 @@ module.exports = {
|
|
|
70
78
|
"./node_modules/@edmicro/olkit/**/*.{js,mjs}"
|
|
71
79
|
],
|
|
72
80
|
theme: {
|
|
73
|
-
extend: {
|
|
74
|
-
colors: {
|
|
75
|
-
brand: {
|
|
76
|
-
50: '#F5F8FF',
|
|
77
|
-
100: '#E3EAFF',
|
|
78
|
-
200: '#D2DCFA',
|
|
79
|
-
300: '#A3BAFF',
|
|
80
|
-
400: '#8C9ED4',
|
|
81
|
-
500: '#6D7FB3',
|
|
82
|
-
600: '#5168AC',
|
|
83
|
-
700: '#2B4182', // Onluyen - Prime
|
|
84
|
-
800: '#203165',
|
|
85
|
-
900: '#152147',
|
|
86
|
-
950: '#0D142B',
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
81
|
+
extend: {}
|
|
90
82
|
}
|
|
91
83
|
}
|
|
92
84
|
```
|
|
93
85
|
|
|
86
|
+
|
|
94
87
|
---
|
|
95
88
|
|
|
96
89
|
## 🚀 3. Hướng dẫn sử dụng Components
|