cloud-ui.vusion
Version:
Vusion Cloud UI
37 lines (34 loc) • 923 B
Markdown
### 基本用法
``` vue
<template>
<div :class="$style.root">
<u-button @click="toggle">展开/收起</u-button>
<f-collapse-transition>
<u-menu v-show="expanded" :class="$style.menu" value="3" :router="false" style="width: 128px;">
<u-menu-item to="/guides/">指南</u-menu-item>
<u-menu-item to="/api/">API</u-menu-item>
<u-menu-item to="/components/">原型组件</u-menu-item>
<u-menu-item href="https://github.com/vusion">GitHub</u-menu-item>
</u-menu>
</f-collapse-transition>
</div>
</template>
<script>
export default {
data() {
return { expanded: false };
},
methods: {
toggle() {
this.expanded = !this.expanded;
},
},
};
</script>
<style module>
.root {}
.menu {
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
</style>
```