请扫码查看示例
# 安装
# npm 安装
npm i -S @minix-iot/mui 或者 npm install @minix-iot/mui --save
1
2
2
# yarn 安装
yarn add @minix-iot/mui
1
2
3
2
3
注：
如果 npm 安装较慢，可以切换到淘宝源，使用cnpm安装
切换到淘宝镜像：npm config set registry https://registry.npm.taobao.org
# 升级组件库
- 使用 cnpm install -S + 模块
name+ 版本号，推荐使用cnpm，此处使用npm在部分版本下有问题。
# 升级到最新版本
cnpm install -S @minix-iot/mui@latest
# 升级到指定版本，例如:
cnpm install -S @minix-iot/mui@ + 版本号
# 使用1.0.0版本：
cnpm install -S @minix-iot/mui@1.0.0
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 手动修改
package.json文件下的模块的版本号,然后执行以下命令：
cnpm install(推荐)
#或者
npm update
#或者
npm install
1
2
3
4
5
6
2
3
4
5
6
# 引入组件
WARNING
⚠️ 注意：自定义组件不能作为页面根节点，必须在其外层加父元素
# index.mxl
<element name="m-button" src="../../../../node_modules/@minix-iot/mui/src/button/index"></element>
<element name="m-nav-bar" src="../../../../node_modules/@minix-iot/mui/src/nav-bar/index"></element>
<!-- 页面根元素 -->
<div class="wrapper">
<!-- 顶部导航 -->
<m-nav-bar title="首页" @m-left-click="onLeftClick" @m-right-click="onRightClick" ></m-nav-bar>
<div class="logo-container">
<image class="logo-icon" src="common/images/logo.png"></image>
<text class="logo-text">MiniX</text>
</div>
<div class="main">
<div class="btn-item" for="{{ list }}" onclick="goTo($item.linkUrl)">
<!-- 按钮 -->
<m-button size="super" text="{{$item.linkDesc}}"></m-button>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# index.js
<script>
import router from '@system.router'
import prompt from '@system.prompt'
export default {
data: {
list: [
{
linkDesc: '美居接口列表',
linkUrl: 'pages/bridge/index/index',
},
{
linkDesc: '内置系统接口列表',
linkUrl: 'pages/ohos-bridge/list',
},
{
linkDesc: 'ui组件列表',
detailUrl: 'pages/component/list',
},
{
linkDesc: '内置标签/组件列表',
detailUrl: 'pages/app-component/list',
},
],
},
onLeftClick() {
prompt.showToast({
message: 'left click',
duration: 2000,
})
},
onRightClick() {
router.push({
uri: 'pages/detail/detail',
})
},
goTo(url) {
router.push({
uri: url,
})
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44