blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix mobile nav style

Browse Source
This commit is contained in:
cookfront 2017-04-19 20:11:18 +08:00
parent 483ed1cf14
commit d18bc97deb
5 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples-dist/button.vue
View File

@ -57,7 +57,7 @@
</van-col> </van-col>
</van-row> </van-row>
</example-block><example-block title=""> </example-block><example-block title="页面底部操作按钮">
<van-row> <van-row>
<van-col span="24"> <van-col span="24">
<van-button type="primary" bottom-action="">立即购买</van-button> <van-button type="primary" bottom-action="">立即购买</van-button>

12
docs/examples-dist/datetime-picker.vue
View File

@ -1,9 +1,17 @@
<template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法"> <template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法">
<zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange"> <van-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
</zan-datetime-picker> </van-datetime-picker>
</example-block><example-block title="选择日期">
<van-datetime-picker v-model="currentDate" type="date" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
</van-datetime-picker>
</example-block><example-block title="选择时间">
<van-datetime-picker v-model="currentDate" type="time" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
</van-datetime-picker>
</example-block></section></template> </example-block></section></template>
<script> <script>

4
docs/examples-dist/picker.vue
View File

@ -1,10 +1,10 @@
<template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法"> <template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法">
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker> <van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
</example-block><example-block title="带toolbar的Picker"> </example-block><example-block title="带toolbar的Picker">
<zan-picker :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker> <van-picker :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>

2
docs/examples-docs/button.md
View File

@ -143,7 +143,7 @@ export default {
一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。 一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
:::demo :::demo 页面底部操作按钮
```html ```html
<van-row> <van-row>
<van-col span="24"> <van-col span="24">

49
docs/src/components/mobile-nav.vue
View File

@ -8,22 +8,24 @@
@click="isOpen = !isOpen"> @click="isOpen = !isOpen">
{{group.groupName}} {{group.groupName}}
</div> </div>
<ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }"> <div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
<template v-for="navItem in group.list"> <ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
<li <template v-for="navItem in group.list">
class="mobile-nav-group__title" <li
v-if="!navItem.disabled"> class="mobile-nav-group__title"
<router-link v-if="!navItem.disabled">
active-class="active" <router-link
:to="base + navItem.path"> active-class="active"
<p> :to="base + navItem.path">
{{ navItem.title }} <p>
</p> {{ navItem.title }}
</router-link> </p>
<zan-icon name="arrow"></zan-icon> </router-link>
</li> <van-icon name="arrow"></van-icon>
</template> </li>
</ul> </template>
</ul>
</div>
</div> </div>
</template> </template>
@ -86,7 +88,7 @@ export default {
} }
} }
.zan-icon-arrow { .van-icon-arrow {
position: absolute; position: absolute;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
@ -95,15 +97,24 @@ export default {
} }
} }
@e list { @e list-wrapper {
height: 0; height: 0;
transition: height .5s ease-out; overflow: hidden;
@m open { @m open {
height: auto; height: auto;
} }
} }
@e list {
transform: translateY(-50%);
transition: transform .2s ease-out;
@m open {
transform: translateY(0);
}
}
li { li {
list-style: none; list-style: none;
} }