App
App là component chính chứa toàn bộ nội dung, cài đặt chung của ứng dụng
- View là container chứa các Page nằm bên trong App, 1 App có thể có 1 hoặc nhiều View, mặc định mỗi View sẽ kế thừa các routes từ App, tuy nhiên có thể tuỳ chỉnh với mỗi View cụ thể.
- Page là component hiển thị nội dung trang, khi app có định tuyến, chia ra nhiều routes, mỗi Page sẽ ứng với một route cụ thể, các route được khởi tạo mặc định trong app ( đọc từ trường pages trong file app-config.json) hoặc routes cụ thể khai báo trong View
App Properties
App component nhận tất cả tham số thông qua props.
App Parameters
Danh sách các tham số:
| Parameter | Type | Default | Description |
|---|---|---|---|
| theme | string | auto | Chủ đề của ứng dụng. Có thể là ios, md hoặc auto. Trường hợp là auto thì theme sẽ được đặt iOS cho iOS devices, MD theme trên android. |
| themeDark | boolean | false | Khởi tạo ứng dụng với Dark Theme |
| language | string | Ngôn ngữ ứng dụng. Mặc định là ngôn ngữ hiện tại trên browser/webview (VD: navigator.language). | |
| routes | array | đọc trong trường "pages" trong app-config.json | Mảng các route mặc định cho tất cả các view |
| on | object | {} | Khởi tạo các events handlers cho events . Ví dụ: const zmpParams = { |
| Touch Module Parameters | |||
| touch | object | Object với các tham số: const params = { |
touch parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| touchClicksDistanceThreshold | number | 5 | Khoảng cách (tính theo px) giúp chặn thao tác vuốt nhẹ màn hình. Nếu khoảng cách tap/move lớn hơn giá trị này thì sự kiện "click" sẽ không bị triggered. (Chỉ sử dụng cho touch events khi fastClicks disabled). |
| disableContextMenu | boolean | false | Đặt true để vô hiệu hóa context menu (với chuột phải hoặc nhấn giữ) |
| tapHold | boolean | false | Bật cho phép nhấn giữ |
| tapHoldDelay | number | 750 | Quyết định thời gian (thính theo ms) user phải gữi để sự kiện nhấn giữ được kích hoạt vào element đích |
| tapHoldPreventClicks | boolean | true | Mặc định được kích hoạt, sự kiện click sẽ không được kích hoạt sau sự kiện nhân giữ màn hình |
| activeState | boolean | true | Khi kích hoạt, sẽ tự động thêm class "active-state" vào phần tử đang được active (:active). |
| activeStateElements | string | a, button, label, span, .link, .item-link, | CSS selector cho phép kích hoạt activeState khi click |
| activeStateOnMouseMove | boolean | false | Nếu kích hoạt sẽ giữ class "active state" sau khi mouse di chuyển |
| iosTouchRipple | boolean | false | Kích hoạt hiệu ứng touch ripple cho iOS theme |
| mdTouchRipple | boolean | Kích hoạt hiệu ứng touch ripple cho MD theme (android) | |
| auroraTouchRipple | boolean | false | Kích hoạt hiệu ứng touch ripple cho Aurora theme |
| touchRippleElements | string | .ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, | CSS selector tới phần tử sẽ áp dụng hiệu ứng touch ripple khi click |
| touchRippleInsetElements | string | .ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .md .navbar .link.back | CSS selector của element áp dụng hiệu ứng inset touch ripple khi click |
App Methods & Properties
zmp instance cung cấp các phương thức và thuộc tính:
Ví dụ:
import { zmp } from 'zmp-framework/react';
| Properties | |
|---|---|
| zmp.routes | App routes |
| zmp.language | App language |
| zmp.el | App root HTML element |
| zmp.$el | zmpDom instance với app root HTML element |
| zmp.rtl | Boolean thuộc tính cho biết ứng dụng đang ở layout RTL hay không |
| zmp.theme | String chủ đề hiện tại của ứng dụng |
| zmp.width | App width in px |
| zmp.height | App height in px |
| zmp.left | App left offset in px |
| zmp.top | App top offset in px |
| zmp.initialized | Boolean thuộc tính cho biết app đã được khởi tạo hay chưa |
| zmp.$ | zmpDom alias |
| zmp.params | App parameters |
| zmp.online | Boolean thuộc tính cho biết app đang kết nối hay không. (true nếu online) |
| Methods | |
| zmp.on(event, handler) | Thêm event handler |
| zmp.once(event, handler) | Thêm event handler tự động xóa sau khi được kích hoat |
| zmp.off(event, handler) | Xóa event handler |
| zmp.off(event) | Xóa tất cả handlers cho một event cụ thể |
| zmp.emit(event, ...args) | Kích hoạt event trên instance |
| zmp.init() | Khởi tạo ứng dụng khi init App component với tham số init: false |
App Events
App instance emits các events:
| Event | Arguments | Description |
|---|---|---|
| init | Event kích hoạt khi ứng dụng được khởi tạo. | |
| resize | Event sẽ kích hoạt khi kích thước màn hình ứng dụng thay đổi(window resize). | |
| orientationchange | Event will sẽ kích hoạt khi xoay màn hình (window orientantion change). | |
| click | (event) | Event sẽ kích hoạt khi người dùng click |
| touchstart:active | (event) | Event sẽ kích hoạt khi người dùng touch element (mousedown), event được thêm dưới dạng active listener |
| touchmove:active | (event) | Event sẽ kích hoạt khi người dùng thực hiện touch move (mousemove), event được thêm dưới dạng active listener |
| touchend:active | (event) | Event sẽ kích hoạt sau khi người dùng kết thúc hành động touch (mouseup) event được thêm dưới dạng active listener |
| touchstart:passive | (event) | Event sẽ kích hoạt khi người dùng touch element (mousedown), event được thêm dưới dạng pasive listener |
| touchmove:passive | (event) | Event sẽ kích hoạt khi người dùng thực hiện touch move (mousemove), event được thêm dưới dạng passive listener |
| touchend:passive | (event) | Event sẽ kích hoạt sau khi người dùng kết thúc hành động touch (mouseup) event được thêm dưới dạng passive listener |
| online | Event được kích hoạt khi app online | |
| offline | Event được kích hoạt khi app offline | |
| connection | (isOnline) | Event kích hoạt khi trạng thái network thay đổi |
Ví dụ:
zmp.on('connection', function (isOnline) {
if (isOnline) {
console.log('app is online now');
} else {
console.log('app is offline now');
}
});
Ví dụ
Giả sử Project của bạn có cấu trúc như bên dưới:
Code demo fallback when rendering server side!