naive-ui/demo/documentation/components/layout/zhCN/debug.md
2020-01-04 21:05:17 +08:00

37 lines
794 B
Markdown

# Debug
```html
<n-switch v-model="collapsed" />
<n-layout style="height: 480px;">
<n-layout-header mode="absolute" style="height: 64px;">
Cool Header
</n-layout-header>
<n-layout mode="absolute" style="top: 64px;">
<n-layout-sider
mode="absolute"
:collapsed="collapsed"
show-toggle-button
@collapse="collapsed = true"
@expand="collapsed = false"
>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout mode="absolute" :use-native-scrollbar="false">
<n-layout-content>
<span>Content</span>
</n-layout-content>
<n-layout-footer>
<n-h1>Footer</n-h1>
</n-layout-footer>
</n-layout>
</n-layout>
</n-layout>
```
```js
export default {
data () {
return {
collapsed: false
}
}
}
```