2023-01-15_ant design 实现布局

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的收缩状态