@tuya-miniapp/smart-ui 0.0.1-beta-2 → 0.0.1-beta-3
Sign up to get free protection for your applications and to get access to all the features.
package/README.md
CHANGED
|
@@ -1,37 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
<img alt="logo" src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo.png" width="120" style="margin-bottom: 10px;">
|
|
3
|
-
</p>
|
|
4
|
-
<h3 align="center">轻量、可靠的智能小程序 UI 组件库</h3>
|
|
1
|
+
# @tuya-miniapp/smart-ui
|
|
5
2
|
|
|
6
|
-
|
|
3
|
+
## Introduction
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
`@tuya-miniapp/smart-ui` is a **lightweight and reliable smart MiniApp component library** based on `vant-weapp`, providing a complete set of UI components that adhere to the design specifications for smart MiniApp on mobile devices.
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
## Preview
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
Scan the smart mini program QR code below to experience the component library examples.
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
<img src="https://images.tuyaus.com/content-platform/hestia/1716260344a168dc61f68.png" width="200" height="200" style="margin-top: 10px;" >
|
|
15
12
|
|
|
16
|
-
|
|
13
|
+
## Before Using
|
|
17
14
|
|
|
18
|
-
|
|
15
|
+
Before using Smart UI, make sure you have studied the official [Smart Mini Program Quick Start](https://developer.tuya.com/en/miniapp/develop/miniapp/guide/start/smart) and [Mini Program Component Introduction](https://developer.tuya.com/en/miniapp/develop/miniapp/framework/component/intro).
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
## 安装
|
|
17
|
+
## Installation
|
|
23
18
|
|
|
24
19
|
```bash
|
|
25
|
-
#
|
|
20
|
+
# Install via yarn (recommended)
|
|
26
21
|
yarn add @tuya-miniapp/smart-ui
|
|
27
22
|
|
|
28
|
-
#
|
|
23
|
+
# Install via npm
|
|
29
24
|
npm i @tuya-miniapp/smart-ui
|
|
30
25
|
```
|
|
31
26
|
|
|
32
|
-
##
|
|
27
|
+
## Using Components
|
|
33
28
|
|
|
34
|
-
|
|
29
|
+
Taking the button component as an example, you only need to import the corresponding custom component in the JSON file.
|
|
35
30
|
|
|
36
31
|
```json
|
|
37
32
|
{
|
|
@@ -41,28 +36,28 @@ npm i @tuya-miniapp/smart-ui
|
|
|
41
36
|
}
|
|
42
37
|
```
|
|
43
38
|
|
|
44
|
-
|
|
39
|
+
Then you can directly use the component in the TYML file.
|
|
45
40
|
|
|
46
41
|
```html
|
|
47
|
-
<s-button type="primary"
|
|
42
|
+
<s-button type="primary">Button</s-button>
|
|
48
43
|
```
|
|
49
44
|
|
|
50
|
-
##
|
|
45
|
+
## Preview in Developer Tools
|
|
51
46
|
|
|
52
47
|
```bash
|
|
53
|
-
#
|
|
48
|
+
# Install project dependencies
|
|
54
49
|
yarn
|
|
55
50
|
|
|
56
|
-
#
|
|
51
|
+
# Compile components
|
|
57
52
|
yarn dev
|
|
58
53
|
```
|
|
59
54
|
|
|
60
|
-
|
|
55
|
+
Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools), add the `smart-ui/example` directory, and you can preview the examples.
|
|
61
56
|
|
|
62
|
-
##
|
|
57
|
+
## Base Library Version
|
|
63
58
|
|
|
64
|
-
|
|
59
|
+
`@tuya-miniapp/smart-ui` provides stable support starting from the smart MiniApp base library version `2.19.0`.
|
|
65
60
|
|
|
66
|
-
##
|
|
61
|
+
## Open Source License
|
|
67
62
|
|
|
68
|
-
|
|
63
|
+
This project is licensed under the [MIT](https://en.wikipedia.org/wiki/MIT_License) license. Feel free to enjoy and contribute to the open-source community.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.css';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:
|
|
1
|
+
@import '../common/index.wxss';.van-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.van-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.van-action-sheet__item{color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.van-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.van-action-sheet__cancel,.van-action-sheet__confirm,.van-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.van-action-sheet__cancel--hover,.van-action-sheet__confirm--hover,.van-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.van-action-sheet__cancel:after,.van-action-sheet__confirm:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.van-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.van-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.van-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.van-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__loading{color:inherit!important;display:flex!important}.van-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
|