@edmicro/olkit 2.1.1 → 2.1.6
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/LICENSE +21 -0
- package/README.md +271 -332
- package/fesm2022/edmicro-olkit.mjs +450 -156
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/olkit.css +2 -29
- package/package.json +1 -1
- package/types/edmicro-olkit.d.ts +11 -6
- package/types/edmicro-olkit.d.ts.map +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 EDMicro
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,332 +1,271 @@
|
|
|
1
|
-
# @edmicro/olkit - Ôn Luyện Design System UI Library
|
|
2
|
-
|
|
3
|
-
Thư viện thành phần giao diện người dùng (UI Components) chuẩn hoá 100% theo **Figma Ôn Luyện Design System** dành cho Angular (phiên bản 18+).
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## 🌟 Tính năng nổi bật
|
|
8
|
-
|
|
9
|
-
- 🎯 **100% Chuẩn Figma Ôn Luyện**: Chuẩn hoá toàn bộ token màu sắc Brand Prime (`#2B4182`), Crimson Red (`#C70036`), Emerald Green (`#007A55`), Orange (`#FF5A1F`), Grayscale, Shadows, Radii.
|
|
10
|
-
- ⚡ **100% Standalone Components**: Import độc lập từng component trực tiếp vào Component/Page mà không cần NgModule cồng kềnh, tối ưu Tree-shaking
|
|
11
|
-
- 🎨 **Không bắt buộc cài Tailwind CSS**: Tích hợp sẵn file CSS độc lập `olkit.css` đã được pre-compile toàn bộ utility classes.
|
|
12
|
-
- 🌓 **Hỗ trợ Dark Mode / Light Mode**: Tự động chuyển đổi hoặc quản lý theo class `.dark`.
|
|
13
|
-
- 📱 **Hỗ trợ đa nền tảng & thiết bị**: Tương thích responsive cho Web, Tablet, Mobile Web và Webview Hybrid App.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
#
|
|
24
|
-
npm install @edmicro/olkit
|
|
25
|
-
|
|
26
|
-
# Hoặc qua Yarn
|
|
27
|
-
yarn add @edmicro/olkit
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
>
|
|
52
|
-
>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
OlAlert,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
],
|
|
86
|
-
templateUrl: './dashboard.component.html',
|
|
87
|
-
})
|
|
88
|
-
export class DashboardComponent {
|
|
89
|
-
isModalOpen = false;
|
|
90
|
-
|
|
91
|
-
openModal() {
|
|
92
|
-
this.isModalOpen = true;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
---
|
|
98
|
-
|
|
99
|
-
## 💻 4. Code Mẫu Chi Tiết Từng Component
|
|
100
|
-
|
|
101
|
-
### 🔘 Buttons (`<ol-button>`)
|
|
102
|
-
|
|
103
|
-
Hỗ trợ đầy đủ biến thể theo Figma Ôn Luyện: `brand
|
|
104
|
-
|
|
105
|
-
```html
|
|
106
|
-
<!-- 1. Màu sắc cơ bản -->
|
|
107
|
-
<ol-button color="brand" size="md">Bắt đầu ngay</ol-button>
|
|
108
|
-
<ol-button color="green" size="md">Nộp bài</ol-button>
|
|
109
|
-
<ol-button color="red" size="md">Thoát bài thi</ol-button>
|
|
110
|
-
<ol-button color="orange" size="md">Tạm dừng</ol-button>
|
|
111
|
-
|
|
112
|
-
<!-- 2. Kiểu Outline & Ghost -->
|
|
113
|
-
<ol-button color="brand" [outline]="true">Nút viền Brand</ol-button>
|
|
114
|
-
<ol-button color="ghost">Nút trong suốt (Ghost)</ol-button>
|
|
115
|
-
<ol-button color="tertiary">Nút phụ Tertiary</ol-button>
|
|
116
|
-
|
|
117
|
-
<!-- 3. Kích thước (xs, sm, md, lg, xl) -->
|
|
118
|
-
<ol-button size="xs">Cực nhỏ (xs)</ol-button>
|
|
119
|
-
<ol-button size="sm">Nhỏ (sm)</ol-button>
|
|
120
|
-
<ol-button size="md">Tiêu chuẩn (md)</ol-button>
|
|
121
|
-
<ol-button size="lg">Lớn (lg)</ol-button>
|
|
122
|
-
<ol-button size="xl">Rất lớn (xl)</ol-button>
|
|
123
|
-
|
|
124
|
-
<!-- 4. Kiểu bo góc (Pill /
|
|
125
|
-
<ol-button color="brand" [pill]="true">Bo tròn
|
|
126
|
-
|
|
127
|
-
<!-- 5. Trạng thái Loading & Disabled -->
|
|
128
|
-
<ol-button color="brand" [loading]="true" loadingText="Đang xử lý...">Đăng nhập</ol-button>
|
|
129
|
-
<ol-button color="brand" [disabled]="true">Vô hiệu hóa</ol-button>
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
---
|
|
157
|
-
|
|
158
|
-
###
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
```html
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
<ol-
|
|
166
|
-
<
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
<
|
|
171
|
-
|
|
172
|
-
</ol-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
<ol-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
npm view @edmicro/olkit versions
|
|
273
|
-
```
|
|
274
|
-
|
|
275
|
-
> Cách cài từ GitLab (`npm install git+https://…olkit-deploy.git#v1.0.1`) đã
|
|
276
|
-
> **bỏ** — gói phát hành trên NPM registry công khai từ bản 1.0.x.
|
|
277
|
-
|
|
278
|
-
---
|
|
279
|
-
|
|
280
|
-
## 📄 License & Bản quyền
|
|
281
|
-
|
|
282
|
-
### Giấy phép chính
|
|
283
|
-
|
|
284
|
-
Dự án này được cấp phép theo **MIT License**
|
|
285
|
-
Copyright (c) 2026 EDMicro
|
|
286
|
-
|
|
287
|
-
### Thành phần bên thứ ba
|
|
288
|
-
|
|
289
|
-
Dự án này tích hợp các thành phần mã nguồn mở từ bên thứ ba, mỗi thành phần giữ nguyên điều khoản giấy phép gốc:
|
|
290
|
-
|
|
291
|
-
| Thành phần | License | Commercial Use | Attribution Required |
|
|
292
|
-
| ----------------- | ------------- | -------------- | -------------------- |
|
|
293
|
-
| **Flowbite** | MIT | ✅ | Giữ copyright notice |
|
|
294
|
-
| **Myna UI Icons** | MIT | ✅ | Giữ copyright notice |
|
|
295
|
-
| **Solar Icons** | **CC BY 4.0** | ✅ | **✅ Bắt buộc** |
|
|
296
|
-
|
|
297
|
-
#### ⚠️ Lưu ý quan trọng về Solar Icons
|
|
298
|
-
|
|
299
|
-
**Solar Icon Set** của 480 Design được cấp phép theo **Creative Commons Attribution 4.0 International (CC BY 4.0)**.
|
|
300
|
-
|
|
301
|
-
Điều này có nghĩa:
|
|
302
|
-
|
|
303
|
-
- ✅ Bạn có thể sử dụng cho mục đích thương mại
|
|
304
|
-
- ✅ Bạn có thể chỉnh sửa, tùy biến màu sắc, kích thước
|
|
305
|
-
- ⚠️ **BẮT BUỘC ghi công tác giả** (attribution) khi sử dụng
|
|
306
|
-
|
|
307
|
-
**Attribution mẫu:**
|
|
308
|
-
|
|
309
|
-
```
|
|
310
|
-
Solar Icons by 480 Design
|
|
311
|
-
Licensed under CC BY 4.0
|
|
312
|
-
https://creativecommons.org/licenses/by/4.0/
|
|
313
|
-
```
|
|
314
|
-
|
|
315
|
-
#### Chi tiết đầy đủ
|
|
316
|
-
|
|
317
|
-
Xem chi tiết các giấy phép trong:
|
|
318
|
-
|
|
319
|
-
- [`LICENSE`](../../LICENSE) - Giấy phép MIT chính của dự án
|
|
320
|
-
- [`THIRD-PARTY-NOTICES`](../../THIRD-PARTY-NOTICES) - Thông báo đầy đủ về license bên thứ ba
|
|
321
|
-
- [`LICENSES/`](../../LICENSES/) - Bản gốc các giấy phép:
|
|
322
|
-
- `FLOWBITE-MIT.txt`
|
|
323
|
-
- `MYNAUI-MIT.txt`
|
|
324
|
-
- `SOLAR-CC-BY-4.0.txt`
|
|
325
|
-
|
|
326
|
-
---
|
|
327
|
-
|
|
328
|
-
## 📞 Liên hệ
|
|
329
|
-
|
|
330
|
-
- **Đơn vị phát triển**: EDMICRO - Đội ngũ Frontend Ôn Luyện V4
|
|
331
|
-
- **Figma Design System**: [Ôn Luyện Design System](https://www.figma.com/design/lip4g3PkcupVurtCxXCkEz/%C3%94n-Luy%E1%BB%87n-Design-System?node-id=2542-21012)
|
|
332
|
-
- **GitLab Repository**: [https://gitlab.edmicro.io/onluyenpub/olkit-deploy](https://gitlab.edmicro.io/onluyenpub/olkit-deploy)
|
|
1
|
+
# @edmicro/olkit - Ôn Luyện Design System UI Library
|
|
2
|
+
|
|
3
|
+
Thư viện thành phần giao diện người dùng (UI Components) chuẩn hoá 100% theo **Figma Ôn Luyện Design System** dành cho Angular (phiên bản 18+).
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🌟 Tính năng nổi bật
|
|
8
|
+
|
|
9
|
+
- 🎯 **100% Chuẩn Figma Ôn Luyện**: Chuẩn hoá toàn bộ token màu sắc Brand Prime (`#2B4182`), Crimson Red (`#C70036`), Emerald Green (`#007A55`), Orange (`#FF5A1F`), Grayscale, Shadows, Radii.
|
|
10
|
+
- ⚡ **100% Standalone Components**: Import độc lập từng component trực tiếp vào Component/Page mà không cần NgModule cồng kềnh, tối ưu hóa Tree-shaking.
|
|
11
|
+
- 🎨 **Không bắt buộc cài Tailwind CSS**: Tích hợp sẵn file CSS độc lập `olkit.css` đã được pre-compile toàn bộ utility classes và design tokens.
|
|
12
|
+
- 🌓 **Hỗ trợ Dark Mode / Light Mode**: Tự động chuyển đổi hoặc quản lý theo class `.dark`.
|
|
13
|
+
- 📱 **Hỗ trợ đa nền tảng & thiết bị**: Tương thích responsive cho Web, Tablet, Mobile Web và Webview Hybrid App.
|
|
14
|
+
- 🧩 **Tích hợp liền mạch với `@edmicro/olkit-icons`**: Tự động bundle sẵn toàn bộ các icon lõi (Core icons) phục vụ đóng/mở, thông báo, điều hướng.
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## 📦 1. Cài đặt
|
|
19
|
+
|
|
20
|
+
Cài đặt `@edmicro/olkit` cùng với gói icons phụ thuộc `@edmicro/olkit-icons`:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
# Cài đặt qua NPM
|
|
24
|
+
npm install @edmicro/olkit @edmicro/olkit-icons
|
|
25
|
+
|
|
26
|
+
# Hoặc qua Yarn / Bun / PNPM
|
|
27
|
+
yarn add @edmicro/olkit @edmicro/olkit-icons
|
|
28
|
+
bun add @edmicro/olkit @edmicro/olkit-icons
|
|
29
|
+
pnpm add @edmicro/olkit @edmicro/olkit-icons
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## 🎨 2. Cấu hình Styles (Bắt buộc)
|
|
35
|
+
|
|
36
|
+
Thêm file `olkit.css` vào mục `styles` trong file `angular.json` của dự án:
|
|
37
|
+
|
|
38
|
+
```json
|
|
39
|
+
"architect": {
|
|
40
|
+
"build": {
|
|
41
|
+
"options": {
|
|
42
|
+
"styles": [
|
|
43
|
+
"node_modules/@edmicro/olkit/olkit.css",
|
|
44
|
+
"src/styles.scss"
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> 💡 **Tại sao chỉ cần thêm vào `angular.json`?**
|
|
52
|
+
> File `olkit.css` là bản CSS độc lập đã được biên dịch sẵn toàn bộ Design Tokens (màu sắc Ôn Luyện, bo góc, bóng đổ) và toàn bộ utility classes. Việc khai báo trực tiếp vào `angular.json` đảm bảo hoạt động tương thích 100% trên mọi dự án Angular (SCSS / CSS, có hoặc không có Tailwind CSS).
|
|
53
|
+
>
|
|
54
|
+
> ⚠️ **Lưu ý:** Sau khi lưu file `angular.json`, hãy **khởi động lại dev server** (`Ctrl + C` và chạy lại `ng serve` / `npm start`) để Angular áp dụng stylesheet mới.
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## 🚀 3. Hướng dẫn sử dụng cơ bản
|
|
59
|
+
|
|
60
|
+
Do tất cả component đều là **Standalone**, bạn chỉ cần import component nào bạn thực sự sử dụng vào mảng `imports: [...]` của Angular Component:
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
import { Component } from '@angular/core';
|
|
64
|
+
import {
|
|
65
|
+
OlButton,
|
|
66
|
+
OlAlert,
|
|
67
|
+
OlModal,
|
|
68
|
+
OlTabs,
|
|
69
|
+
OlTabItem,
|
|
70
|
+
OlAccordion,
|
|
71
|
+
OlAccordionItem,
|
|
72
|
+
} from '@edmicro/olkit';
|
|
73
|
+
|
|
74
|
+
@Component({
|
|
75
|
+
selector: 'app-dashboard',
|
|
76
|
+
standalone: true,
|
|
77
|
+
imports: [
|
|
78
|
+
OlButton,
|
|
79
|
+
OlAlert,
|
|
80
|
+
OlModal,
|
|
81
|
+
OlTabs,
|
|
82
|
+
OlTabItem,
|
|
83
|
+
OlAccordion,
|
|
84
|
+
OlAccordionItem,
|
|
85
|
+
],
|
|
86
|
+
templateUrl: './dashboard.component.html',
|
|
87
|
+
})
|
|
88
|
+
export class DashboardComponent {
|
|
89
|
+
isModalOpen = false;
|
|
90
|
+
|
|
91
|
+
openModal() {
|
|
92
|
+
this.isModalOpen = true;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## 💻 4. Code Mẫu Chi Tiết Từng Component
|
|
100
|
+
|
|
101
|
+
### 🔘 Buttons (`<ol-button>`)
|
|
102
|
+
|
|
103
|
+
Hỗ trợ đầy đủ biến thể theo Figma Ôn Luyện: `brand`, `green`, `red`, `orange`, `ghost`, `tertiary`, `dark`, `white`.
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<!-- 1. Màu sắc cơ bản -->
|
|
107
|
+
<ol-button color="brand" size="md">Bắt đầu ngay</ol-button>
|
|
108
|
+
<ol-button color="green" size="md">Nộp bài</ol-button>
|
|
109
|
+
<ol-button color="red" size="md">Thoát bài thi</ol-button>
|
|
110
|
+
<ol-button color="orange" size="md">Tạm dừng</ol-button>
|
|
111
|
+
|
|
112
|
+
<!-- 2. Kiểu Outline & Ghost -->
|
|
113
|
+
<ol-button color="brand" [outline]="true">Nút viền Brand</ol-button>
|
|
114
|
+
<ol-button color="ghost">Nút trong suốt (Ghost)</ol-button>
|
|
115
|
+
<ol-button color="tertiary">Nút phụ Tertiary</ol-button>
|
|
116
|
+
|
|
117
|
+
<!-- 3. Kích thước (xs, sm, md, lg, xl) -->
|
|
118
|
+
<ol-button size="xs">Cực nhỏ (xs)</ol-button>
|
|
119
|
+
<ol-button size="sm">Nhỏ (sm)</ol-button>
|
|
120
|
+
<ol-button size="md">Tiêu chuẩn (md)</ol-button>
|
|
121
|
+
<ol-button size="lg">Lớn (lg)</ol-button>
|
|
122
|
+
<ol-button size="xl">Rất lớn (xl)</ol-button>
|
|
123
|
+
|
|
124
|
+
<!-- 4. Kiểu bo góc (Pill / Mặc định) -->
|
|
125
|
+
<ol-button color="brand" [pill]="true">Bo tròn (Pill)</ol-button>
|
|
126
|
+
|
|
127
|
+
<!-- 5. Trạng thái Loading & Disabled -->
|
|
128
|
+
<ol-button color="brand" [loading]="true" loadingText="Đang xử lý...">Đăng nhập</ol-button>
|
|
129
|
+
<ol-button color="brand" [disabled]="true">Vô hiệu hóa</ol-button>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
### 🔔 Alerts (`<ol-alert>`)
|
|
135
|
+
|
|
136
|
+
Thông báo phản hồi ngữ cảnh: `info`, `danger` (red), `success` (green), `warning` (orange), `neutral`.
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<!-- Thông báo đơn giản -->
|
|
140
|
+
<ol-alert color="info">Đây là thông báo thông tin hệ thống.</ol-alert>
|
|
141
|
+
<ol-alert color="success">Chúc mừng bạn đã hoàn thành bài thi với 100 điểm!</ol-alert>
|
|
142
|
+
<ol-alert color="danger">Đã có lỗi xảy ra trong quá trình lưu kết quả.</ol-alert>
|
|
143
|
+
<ol-alert color="warning">Thời gian làm bài còn lại dưới 5 phút.</ol-alert>
|
|
144
|
+
|
|
145
|
+
<!-- Thông báo có nút đóng (Dismissible) -->
|
|
146
|
+
<ol-alert color="info" [dismissible]="true" (closed)="onAlertClosed()">
|
|
147
|
+
Bạn có thể tắt thông báo này khi đã đọc xong.
|
|
148
|
+
</ol-alert>
|
|
149
|
+
|
|
150
|
+
<!-- Thông báo dạng Border Accent -->
|
|
151
|
+
<ol-alert color="danger" [border]="true">
|
|
152
|
+
Lỗi bảo mật: Phiên làm việc đã hết hạn.
|
|
153
|
+
</ol-alert>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
### 🪟 Modals (`<ol-modal>`)
|
|
159
|
+
|
|
160
|
+
Cửa sổ hộp thoại tương tác cao, hỗ trợ backdrop dismiss, phím ESC, nhiều kích thước:
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<ol-button color="brand" (click)="isModalOpen = true">Mở Modal</ol-button>
|
|
164
|
+
|
|
165
|
+
<ol-modal [(isOpen)]="isModalOpen" title="Xác nhận nộp bài thi" size="md" [dismissible]="true">
|
|
166
|
+
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
167
|
+
Bạn còn 3 câu chưa hoàn thành. Bạn có chắc chắn muốn nộp bài thi ngay bây giờ không?
|
|
168
|
+
</p>
|
|
169
|
+
|
|
170
|
+
<div slot="footer" class="flex justify-end gap-3">
|
|
171
|
+
<ol-button color="ghost" (click)="isModalOpen = false">Làm tiếp</ol-button>
|
|
172
|
+
<ol-button color="brand" (click)="submitExam()">Xác nhận nộp</ol-button>
|
|
173
|
+
</div>
|
|
174
|
+
</ol-modal>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
### 📑 Tabs (`<ol-tabs>` & `<ol-tab-item>`)
|
|
180
|
+
|
|
181
|
+
```html
|
|
182
|
+
<ol-tabs variant="underline">
|
|
183
|
+
<ol-tab-item title="Tổng quan" [active]="true">
|
|
184
|
+
<p>Nội dung tổng quan khoá học...</p>
|
|
185
|
+
</ol-tab-item>
|
|
186
|
+
|
|
187
|
+
<ol-tab-item title="Danh sách bài học">
|
|
188
|
+
<p>Chi tiết từng bài học trong lộ trình...</p>
|
|
189
|
+
</ol-tab-item>
|
|
190
|
+
|
|
191
|
+
<ol-tab-item title="Đánh giá & Bình luận">
|
|
192
|
+
<p>Phản hồi từ học sinh và giáo viên...</p>
|
|
193
|
+
</ol-tab-item>
|
|
194
|
+
</ol-tabs>
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
### 📂 Accordion (`<ol-accordion>` & `<ol-accordion-item>`)
|
|
200
|
+
|
|
201
|
+
```html
|
|
202
|
+
<ol-accordion [alwaysOpen]="false">
|
|
203
|
+
<ol-accordion-item title="Chương 1: Khái niệm cơ bản" [isOpen]="true">
|
|
204
|
+
Nội dung lý thuyết và các định nghĩa cơ bản của chương 1...
|
|
205
|
+
</ol-accordion-item>
|
|
206
|
+
|
|
207
|
+
<ol-accordion-item title="Chương 2: Phương pháp giải bài tập">
|
|
208
|
+
Các dạng bài tập thường gặp và phương pháp giải chi tiết...
|
|
209
|
+
</ol-accordion-item>
|
|
210
|
+
|
|
211
|
+
<ol-accordion-item title="Chương 3: Đề thi thử">
|
|
212
|
+
Bộ 10 đề thi thử bám sát cấu trúc mới nhất...
|
|
213
|
+
</ol-accordion-item>
|
|
214
|
+
</ol-accordion>
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
### 🎯 Sử dụng Icon với `@edmicro/olkit-icons`
|
|
220
|
+
|
|
221
|
+
Để hiển thị icon tùy biến ở bất kỳ đâu trong ứng dụng:
|
|
222
|
+
|
|
223
|
+
```typescript
|
|
224
|
+
import { Component } from '@angular/core';
|
|
225
|
+
import { OlIcon, provideOlIcons } from '@edmicro/olkit-icons';
|
|
226
|
+
import { solar_home_2_linear } from '@edmicro/olkit-icons/solar';
|
|
227
|
+
import { lucide_search } from '@edmicro/olkit-icons/lucide';
|
|
228
|
+
|
|
229
|
+
@Component({
|
|
230
|
+
standalone: true,
|
|
231
|
+
imports: [OlIcon],
|
|
232
|
+
providers: [
|
|
233
|
+
provideOlIcons({ solar_home_2_linear, lucide_search })
|
|
234
|
+
],
|
|
235
|
+
template: `
|
|
236
|
+
<ol-icon name="solar_home_2_linear" size="base" class="text-brand" />
|
|
237
|
+
<ol-icon name="lucide_search" [size]="20" />
|
|
238
|
+
`
|
|
239
|
+
})
|
|
240
|
+
export class MyComponent {}
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
---
|
|
244
|
+
|
|
245
|
+
## 🛠️ 5. Cập nhật phiên bản mới
|
|
246
|
+
|
|
247
|
+
```bash
|
|
248
|
+
# Nâng lên bản mới nhất của cả 2 gói
|
|
249
|
+
npm install @edmicro/olkit@latest @edmicro/olkit-icons@latest
|
|
250
|
+
|
|
251
|
+
# Xem các phiên bản đã phát hành trên NPM
|
|
252
|
+
npm view @edmicro/olkit versions
|
|
253
|
+
npm view @edmicro/olkit-icons versions
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
## 📄 License & Bản quyền
|
|
259
|
+
|
|
260
|
+
Dự án này được cấp phép theo **MIT License** — Copyright © 2026 EDMICRO.
|
|
261
|
+
|
|
262
|
+
- [`LICENSE`](../../LICENSE) — Giấy phép MIT chính
|
|
263
|
+
- [`THIRD-PARTY-NOTICES`](../../THIRD-PARTY-NOTICES) — Thông báo đầy đủ về các thư viện mã nguồn mở bên thứ ba
|
|
264
|
+
|
|
265
|
+
---
|
|
266
|
+
|
|
267
|
+
## 📞 Liên hệ & Hỗ trợ
|
|
268
|
+
|
|
269
|
+
- **Đơn vị phát triển**: EDMICRO — Đội ngũ Frontend Ôn Luyện V4
|
|
270
|
+
- **Figma Design System**: [Ôn Luyện Design System](https://www.figma.com/design/lip4g3PkcupVurtCxXCkEz/%C3%94n-Luy%E1%BB%87n-Design-System?node-id=2542-21012)
|
|
271
|
+
- **GitLab Repository**: [https://gitlab.edmicro.io/onluyenpub/olkit-deploy](https://gitlab.edmicro.io/onluyenpub/olkit-deploy)
|