Layout 布局

用于组织网页的框架结构。

基本用法

<Layout> 容器、可包裹子组件 <Header>、<Footer>、<Aside>、<Content>。

Header

Content

Copyright @ 2019-2021 iDesign. All Rights Reserved

<template>
  <i-layout>
    <i-layout-header>Header</i-layout-header>
    <i-layout-content>Content</i-layout-content>
    <i-layout-footer>Copyright @ 2019-2021 iDesign. All Rights Reserved</i-layout-footer>
  </i-layout>
</template>

显示代码复制代码复制代码

侧边导航布局

当 <Layout> 容器子元素中包含 <Aside> 侧边栏组件时，<Layout> 容器的全部子元素会水平排列，否则会垂直排列。

Aside

Content

Copyright @ 2019-2021 iDesign. All Rights Reserved

<template>
  <i-layout>
    <i-layout-aside>Aside</i-layout-aside>
    <i-layout>
      <i-layout-content>Content</i-layout-content>
      <i-layout-footer>Copyright @ 2019-2021 iDesign. All Rights Reserved</i-layout-footer>
    </i-layout>
  </i-layout>
</template>

显示代码复制代码复制代码

组合导航布局

可根据所需场景自由组合。

Header

Aside

Content

Copyright @ 2019-2021 iDesign. All Rights Reserved

Header

Content

Copyright @ 2019-2021 iDesign. All Rights Reserved

Aside

<template>
  <i-layout>
    <i-layout-header>Header</i-layout-header>
    <i-layout>
      <i-layout-aside>Aside</i-layout-aside>
      <i-layout>
        <i-layout-content>Content</i-layout-content>
        <i-layout-footer>Copyright @ 2019-2021 iDesign. All Rights Reserved</i-layout-footer>
      </i-layout>
    </i-layout>
  </i-layout>

  <br />
  <br />

  <i-layout>
    <i-layout-header>Header</i-layout-header>
    <i-layout>
      <i-layout>
        <i-layout-content>Content</i-layout-content>
        <i-layout-footer>Copyright @ 2019-2021 iDesign. All Rights Reserved</i-layout-footer>
      </i-layout>
      <i-layout-aside>Aside</i-layout-aside>
    </i-layout>
  </i-layout>
</template>

显示代码复制代码复制代码

自定义侧边栏

Aside 提供 width 属性来自定义宽度。

Header

Aside

Content

Copyright @ 2019-2021 iDesign. All Rights Reserved

Header

Aside

Content

Copyright @ 2019-2021 iDesign. All Rights Reserved

<template>
  <i-layout>
    <i-layout-header>Header</i-layout-header>
    <i-layout>
      <i-layout-aside :width="100">Aside</i-layout-aside>
      <i-layout>
        <i-layout-content>Content</i-layout-content>
        <i-layout-footer>Copyright @ 2019-2021 iDesign. All Rights Reserved</i-layout-footer>
      </i-layout>
    </i-layout>
  </i-layout>

  <br />
  <br />

  <i-layout>
    <i-layout-header>Header</i-layout-header>
    <i-layout>
      <i-layout-aside width="100px">Aside</i-layout-aside>
      <i-layout>
        <i-layout-content>Content</i-layout-content>
        <i-layout-footer>Copyright @ 2019-2021 iDesign. All Rights Reserved</i-layout-footer>
      </i-layout>
    </i-layout>
  </i-layout>
</template>

显示代码复制代码复制代码

Aside Attributes

属性	说明	类型	默认值
width	宽度	number	240