Sidebar
Examples
Collapse mode
Use the collapse-mode prop to specify the collapse mode, which can be slim (partially collapsed) or hidden (completely collapsed).
/demo/sidebar/collapse-mode.vue
<template>
<veui-layout>
<veui-header class="header">
Header
</veui-header>
<veui-layout>
<veui-sidebar
collapsible
:collapse-mode="mode"
>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content class="content">
<veui-radio-button-group
v-model="mode"
class="group"
:items="modes"
/>
</veui-content>
<veui-footer
class="footer"
style="background: #ccc;"
>
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</veui-layout>
</template>
<script>
import { Layout, Header, Footer, Sidebar, Content, RadioButtonGroup } from 'veui'
export default {
components: {
'veui-layout': Layout,
'veui-header': Header,
'veui-footer': Footer,
'veui-sidebar': Sidebar,
'veui-content': Content,
'veui-radio-button-group': RadioButtonGroup
},
data () {
return {
mode: 'slim',
modes: [
{ label: 'slim', value: 'slim' },
{ label: 'hidden', value: 'hidden' }
]
}
}
}
</script>
<style lang="less" scoped>
.center,
.header,
.footer,
.content {
display: flex;
align-items: center;
justify-content: center;
}
.group {
margin-bottom: 12px;
}
.full {
height: 100%;
}
</style>
Toggle button
Use the collapsible prop to show or hide the expand/collapse button of the sidebar.
/demo/sidebar/collapsible.vue
<template>
<veui-layout>
<veui-header class="heaer">
Header
</veui-header>
<veui-layout>
<veui-sidebar :collapsible="collapsible">
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content class="content">
<veui-switch
v-model="collapsible"
>
Collapsible
</veui-switch>
</veui-content>
<veui-footer
class="footer"
style="background: #ccc;"
>
Footer（背景仅为演示
</veui-footer>
</veui-layout>
</veui-layout>
</veui-layout>
</template>
<script>
import { Layout, Header, Footer, Sidebar, Content, Switch } from 'veui'
export default {
components: {
'veui-layout': Layout,
'veui-header': Header,
'veui-footer': Footer,
'veui-sidebar': Sidebar,
'veui-content': Content,
'veui-switch': Switch
},
data () {
return {
collapsible: true
}
}
}
</script>
<style lang="less" scoped>
.center,
.header,
.footer,
.content {
display: flex;
align-items: center;
justify-content: center;
}
.full {
height: 100%;
}
</style>
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
sticky | boolean | false | Whether to stick the sidebar to the top. See Sticky layout for usage notes. |
collapsible | boolean | false | Whether to show the expand/collapse button of the sidebar. |
collapsed | boolean | false |
The state of collapsing or expanding the sidebar. |
autocollapse | boolean | false | Whether to automatically collapse the sidebar when the window is stretched to a certain threshold. |
collapse-mode | 'slim' | 'hidden' | 'slim' | The collapse mode, which can be slim (partially collapsed) or hidden (completely collapsed). |
Slots
| Name | Description |
|---|---|
default | The content of the sidebar. |