mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
docs(dashboard): unify dashboard with vant (#2729)
This commit is contained in:
rex
GitHub
parent
088c0b840d
commit
fc254acfe4
13
example/components/demo-home-nav/index.js
Normal file
13
example/components/demo-home-nav/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
Component({
|
||||
properties: {
|
||||
group: Object
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
wx.navigateTo({
|
||||
url: event.target.dataset.url
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
6
example/components/demo-home-nav/index.json
Normal file
6
example/components/demo-home-nav/index.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../../dist/icon"
|
||||
}
|
||||
}
|
||||
15
example/components/demo-home-nav/index.wxml
Normal file
15
example/components/demo-home-nav/index.wxml
Normal file
@ -0,0 +1,15 @@
|
||||
<view class="demo-home-nav">
|
||||
<view class="demo-home-nav__title">{{ group.groupName }}</view>
|
||||
<view class="demo-home-nav__group">
|
||||
<view
|
||||
wx:for="{{ group.list }}"
|
||||
wx:key="title"
|
||||
class="demo-home-nav__block"
|
||||
data-url="/pages{{ item.path }}/index"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
{{ item.title }}
|
||||
<van-icon name="arrow" custom-class="demo-home-nav__icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
38
example/components/demo-home-nav/index.wxss
Normal file
38
example/components/demo-home-nav/index.wxss
Normal file
@ -0,0 +1,38 @@
|
||||
.demo-home-nav__title {
|
||||
margin: 24px 0 8px 16px;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.demo-home-nav__block {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0 0 12px;
|
||||
padding-left: 20px;
|
||||
color: #323233;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 99px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.demo-home-nav__block:hover {
|
||||
background: darken(#f7f8fa, 3%);
|
||||
}
|
||||
|
||||
.demo-home-nav__block:active {
|
||||
background: darken(#f7f8fa, 6%);
|
||||
}
|
||||
|
||||
.demo-home-nav__icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: -8px;
|
||||
color: rgb(182, 195, 210);
|
||||
font-weight: 900;
|
||||
}
|
||||
7
example/components/demo-home/index.js
Normal file
7
example/components/demo-home/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import list from '../../config';
|
||||
|
||||
Component({
|
||||
data: {
|
||||
list,
|
||||
},
|
||||
});
|
||||
6
example/components/demo-home/index.json
Normal file
6
example/components/demo-home/index.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"demo-home-nav": "../demo-home-nav"
|
||||
}
|
||||
}
|
||||
18
example/components/demo-home/index.wxml
Normal file
18
example/components/demo-home/index.wxml
Normal file
@ -0,0 +1,18 @@
|
||||
<view class="demo-home">
|
||||
<view
|
||||
class="demo-home__title"
|
||||
>
|
||||
<image mode="aspectFit" class="demo-home__image" src="https://img.yzcdn.cn/vant/logo.png" />
|
||||
<view class="demo-home__text">Vant Weapp</view>
|
||||
</view>
|
||||
<view class="demo-home__desc">
|
||||
轻量、可靠的小程序 UI 组件库
|
||||
</view>
|
||||
<view
|
||||
wx:for="{{ list }}"
|
||||
wx:for-item="group"
|
||||
wx:key="index"
|
||||
>
|
||||
<demo-home-nav group="{{ group }}" />
|
||||
</view>
|
||||
</view>
|
||||
46
example/components/demo-home/index.wxss
Normal file
46
example/components/demo-home/index.wxss
Normal file
@ -0,0 +1,46 @@
|
||||
.demo-home {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 46px 20px 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.demo-home__title,
|
||||
.demo-home__desc {
|
||||
padding-left: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-home__title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.demo-home__image,
|
||||
.demo-home__text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.demo-home__image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.demo-home__text {
|
||||
margin-left: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-home__title .demo-home--small {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.demo-home__desc {
|
||||
margin: 0 0 40px;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -3,20 +3,6 @@ import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
list,
|
||||
activeName: []
|
||||
list
|
||||
},
|
||||
|
||||
onChangeCollapse(event) {
|
||||
this.setData({
|
||||
activeNames: event.detail
|
||||
});
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
const { switchTab, url } = event.currentTarget.dataset;
|
||||
if (switchTab) {
|
||||
wx.switchTab({ url });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "Vant Weapp"
|
||||
"navigationBarTitleText": "Vant Weapp",
|
||||
"usingComponents": {
|
||||
"demo-home": "../../components/demo-home"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,42 +1 @@
|
||||
<view class="container">
|
||||
<view class="title">
|
||||
<image class="logo" src="https://img.yzcdn.cn/vant/logo.png" />
|
||||
<view class="title-text">Vant Weapp</view>
|
||||
</view>
|
||||
<view class="desc">轻量、可靠的小程序 UI 组件库</view>
|
||||
|
||||
<van-collapse
|
||||
wx:for="{{ list }}"
|
||||
wx:for-item="group"
|
||||
wx:key="title"
|
||||
value="{{ activeNames }}"
|
||||
border="{{ false }}"
|
||||
bind:change="onChangeCollapse"
|
||||
>
|
||||
<van-collapse-item
|
||||
clickable
|
||||
is-link="{{ false }}"
|
||||
custom-class="mobile-nav"
|
||||
title-class="mobile-nav__title"
|
||||
content-class="mobile-nav__content"
|
||||
title="{{ group.groupName }}"
|
||||
name="{{ group.groupName }}"
|
||||
>
|
||||
<van-icon
|
||||
name="{{ group.icon }}"
|
||||
slot="right-icon"
|
||||
custom-class="mobile-nav__icon"
|
||||
/>
|
||||
<van-cell
|
||||
wx:for="{{ group.list }}"
|
||||
wx:key="title"
|
||||
is-link
|
||||
url="/pages{{ item.path }}/index"
|
||||
data-url="/pages{{ item.path }}/index"
|
||||
data-switch-tab="{{ true }}"
|
||||
title="{{ item.title }}"
|
||||
bind:click="onClick"
|
||||
/>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</view>
|
||||
<demo-home list="{{ list }}" />
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
page {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 45px 20px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.title-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: #7d7e80;
|
||||
margin: 0 0 45px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mobile-nav__title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mobile-nav__content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.mobile-nav__icon {
|
||||
font-size: 24px !important;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mobile-nav__icon image {
|
||||
width: 100%;
|
||||
}
|
||||
@ -13,7 +13,7 @@
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"cloudfunctionRoot": "functions/",
|
||||
"libVersion": "2.8.2",
|
||||
"libVersion": "2.3.0",
|
||||
"appid": "wx1c01b35002d3ba14",
|
||||
"projectname": "vant-weapp",
|
||||
"debugOptions": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user