美文网首页
2023-01-15_ant design 实现布局

2023-01-15_ant design 实现布局

作者: 微笑碧落 | 来源:发表于2023-01-14 10:01 被阅读0次

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

相关文章

网友评论

      本文标题:2023-01-15_ant design 实现布局

      本文链接:https://www.haomeiwen.com/subject/dyincdtx.html