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-row>
</example-block><example-block title="">
</example-block><example-block title="页面底部操作按钮">
<van-row>
<van-col span="24">
<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="基础用法">
<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">
</zan-datetime-picker>
<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">
</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>
<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="基础用法">
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-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`两种状态。
:::demo
:::demo 页面底部操作按钮
```html
<van-row>
<van-col span="24">

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

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