H5 Components

I. Giới thiệu

MiniApp Core UI cung cấp bộ components tiêu chuẩn giúp nhà phát triển tiết kiệm thời gian và đảm bảo đồng nhất thiết kế giữa MiniApp và SuperApp.

Tài liệu này cung cấp thông tin về UI component (Core UI) cho người lập trình (Developer) và người kiểm thử (QC/QA) của PnL hoặc đối tác để phát triển Mini App tích hợp vào Super App của VSF.

II. Hướng dẫn cài đặt bộ Core UI

Thư viện bên dưới cung cấp bộ UI Components cho ReactJS

npm

npm install @vsf-miniapp/ui-react

yarn

yarn add @vsf-miniapp/ui-react

pnpm

pnpm add @vsf-miniapp/ui-react

III. Hướng dẫn sử dụng Core UI**

MiniApp UI Components cung cấp storybook hỗ trợ nhà phát triển tra cứu thông tin chi tiết các component.

Để xem tài liệu MiniApp UI: Xem hướng dẫn cài đặt CLI, start dự án và preview ui tại đây

Khi truy cập Preview Core UI, bạn sẽ nhìn thấy giao diện như hình bên dưới. Mỗi component sẽ có: **Docs **(tài liệu mô tả các thuộc tính, thông số kỹ thuật) và các tùy biến khi sử dụng component.

IV. Các khuyến nghị khi sử dụng Core UI

Khuyến nghị chung: Hãy ưu tiên sử dụng các components trong Core UI để mang lại trải nghiệm đồng bộ cho user vì Core UI đã được chuẩn hóa với UI/UX của Super App. Các Mini App có ít tùy biến về giao diện sẽ giúp tăng tốc độ kiểm duyệt.

1. Design System

Components	Mô tả
	Hãy dùng icon, typography và colors phù hợp với ngữ cảnh.

2. Navigation

Components	Mô tả
	Hãy sử dụng các thành phần NavBar, TabBar, Tabs để bố trí, phân cấp, phân nhóm thông tin hiển thị trên giao diện nhầm giúp điều hướng user tốt hơn việc dàn trải toàn bộ thông tin trên một màn hình.

3. Data Display

Components	Mô tả
	Các components này sẽ giúp giao diện Mini App của bạn trông ngăn nấp hơn, hãy sử dụng một các hợp lý và có chủ đích để thu hút user khám phá thông tin được hiển thị bắt mắt trên màn hình.

4. Layout

Components	Mô tả
	Thiết bị di động có nhiều kích thước màn hình nên các component này giúp bạn bố trí, sắp xếp thông tin dễ nhìn, dễ đọc và dễ tương tác trên màn hình cảm ứng.

5. Form

Components	Mô tả
	Các components này giúp bạn triển khai các biểu mẫu (form) để thu thập nhu cầu của user về sản phẩm dịch vụ của Mini App. Một form tối giản, ít bước sẽ tăng tỷ lệ hoàn thành form của user.

6. Advance

Components	Mô tả
	Hãy sử dụng các components này để tăng sự sinh động của giao diện và tính năng, giúp Mini App tương tác với user hiệu quả trong nhiều ngữ cảnh.

7. Basic

Components	Mô tả
	Bạn có thể tùy biến các components này để đáp ứng với nhu cầu triển khai của Mini App.