1. 简介
-
ant design主要通过a-layout来实现布局。基于flex布局形式
-
一共有如下子布局,这些子布局必须放在a-layout下:a-layout-header、a-layout-sider、a-layout-footer、a-layout-content
-
layout布局可以嵌套,即layout布局下面可以继续放置layout组件。有一些布局必须采用嵌套。
-
如果有sider布局,会采用水平排放,否则采用垂直排放。
-
看看官方的例子把:
image.png
-
代码如下
<a-layout>
<a-layout-sider style="min-height: 100vh;" collapsible width="300px">
<homepage-nav></homepage-nav>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: white;">
header
</a-layout-header>
<a-layout-content>
</a-layout-content>
</a-layout>
</a-layout>
2. a-layout-sider常用属性
-
width :指定宽度
-
collapsible 是否收缩,如果这个为true,且trigger属性为null,或不设置trigger属性,会自动在a-layout-sider的最下方增加一个收缩按钮
image.png
-
trigger : 值可以是string|slot
-
collapsed(v-model) :是否收缩状态。可以通过设置这个属性来控制a-layout-sider的收缩状态
网友评论