ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 02:31:21 +00:00
Code Issues Actions 1 Packages 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
Download Patch File Download Diff File Expand all files Collapse all files

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;
}