@ray-js/smart-ui 2.4.0-beta-6 → 2.4.0-beta-7
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-zh_CN.md +1 -0
- package/README.md +29 -8
- package/package.json +2 -2
package/README-zh_CN.md
CHANGED
package/README.md
CHANGED
|
@@ -4,17 +4,17 @@ English | [简体中文](./README-zh_CN.md)
|
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
7
|
-
`@ray-js/smart-ui` is a React component library based on the `Ray` framework and `@tuya-miniapp/smart-ui`,
|
|
7
|
+
`@ray-js/smart-ui` is a React component library based on the `Ray` framework and `@tuya-miniapp/smart-ui`, designed to provide lightweight and reliable UI components that comply with the mobile design specifications for smart mini programs. By integrating Ray's specification adaptation intermediary layer and built-in perfect TS types, we offer a full set of React components suitable for smart mini programs, enabling developers to quickly build mobile applications that meet design specifications.
|
|
8
8
|
|
|
9
9
|
## Preview
|
|
10
10
|
|
|
11
|
-
Scan the QR code below
|
|
11
|
+
Scan the QR code below for the smart mini program to experience the component library demo.
|
|
12
12
|
|
|
13
|
-
<img src="https://images.
|
|
13
|
+
<img src="https://images.tuyacn.com/content-platform/hestia/1716260412b7f2ae02271.png" width="200" height="200">
|
|
14
14
|
|
|
15
|
-
## Before
|
|
15
|
+
## Before Using
|
|
16
16
|
|
|
17
|
-
Before using Smart UI,
|
|
17
|
+
Before using Smart UI, please ensure you have studied the official [Ray Development Overview](https://developer.tuya.com/cn/miniapp/develop/ray/guide/overview) and [Ray Component Introduction](https://developer.tuya.com/cn/miniapp/develop/ray/framework/component) for smart mini programs.
|
|
18
18
|
|
|
19
19
|
## Installation
|
|
20
20
|
|
|
@@ -28,7 +28,7 @@ npm i @ray-js/smart-ui
|
|
|
28
28
|
|
|
29
29
|
## Using Components
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
Taking the button component as an example
|
|
32
32
|
|
|
33
33
|
```jsx
|
|
34
34
|
import { Button } from '@ray-js/smart-ui';
|
|
@@ -38,6 +38,27 @@ export default function Demo() {
|
|
|
38
38
|
}
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
## Dynamic Import on Demand (Recommended)
|
|
42
|
+
Considering the project’s demand for dynamic import and overall package size concerns, the above import method might leave some component style files that impact the package size. Therefore, we recommend using the on-demand import plugin, which will automatically parse `import { Button } from '@ray-js/smart-ui';` into `import Button from '@ray-js/smart-ui/es/button';`.
|
|
43
|
+
|
|
44
|
+
1. Environment Requirements
|
|
45
|
+
* \>= @ray-js/cli@1.7.4
|
|
46
|
+
* esbuild build mode (does not support webpack mode)
|
|
47
|
+
* Use of ESModule import syntax for importing
|
|
48
|
+
* **SmartUI version 2.4.0 and above**
|
|
49
|
+
|
|
50
|
+
2. Simply import SmartUIAutoImport within the ray.config.ts project file:
|
|
51
|
+
```ts
|
|
52
|
+
import { RayConfig } from '@ray-js/types';
|
|
53
|
+
import SmartUIAutoImport from '@ray-js/smart-ui/lib/auto-import';
|
|
54
|
+
|
|
55
|
+
const config: RayConfig = {
|
|
56
|
+
...
|
|
57
|
+
importTransformer: [SmartUIAutoImport],
|
|
58
|
+
};
|
|
59
|
+
module.exports = config;
|
|
60
|
+
```
|
|
61
|
+
|
|
41
62
|
## Preview in Developer Tools
|
|
42
63
|
|
|
43
64
|
```bash
|
|
@@ -49,8 +70,8 @@ Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools),
|
|
|
49
70
|
|
|
50
71
|
## Base Library Version
|
|
51
72
|
|
|
52
|
-
@ray-js/smart-ui provides stable support
|
|
73
|
+
@ray-js/smart-ui provides stable support from the smart mini program base library version `2.19.0` `@ray-js/ray@^1.5.1` and IDE `0.6.5`.
|
|
53
74
|
|
|
54
75
|
## Open Source License
|
|
55
76
|
|
|
56
|
-
This project is
|
|
77
|
+
This project is based on the [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) license. Please feel free to enjoy and participate in open source.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ray-js/smart-ui",
|
|
3
|
-
"version": "2.4.0-beta-
|
|
3
|
+
"version": "2.4.0-beta-7",
|
|
4
4
|
"description": "轻量、可靠的智能小程序 UI 组件库",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"syncMiniappData": "node ./build/syncMiniappData.js",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@ray-js/components-ty-slider": "^0.3.3",
|
|
45
|
-
"@tuya-miniapp/smart-ui": "
|
|
45
|
+
"@tuya-miniapp/smart-ui": "2.4.0-beta-1",
|
|
46
46
|
"lodash-es": "^4.17.21"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|