lanchao-ui

Layout 布局 beta

用于布局的容器组件，方便快速搭建页面的基本结构:

  • <l-layout>: 当子元素中包含 <l-sider> 时，全部子元素会水平左右排列，否则会垂直上下排列。
  • <l-header>: 顶栏容器。
  • <l-content>: 主要区域容器。
  • <l-footer>: 底部容器。
  • <l-sider>: 侧边栏容器。

WARNING

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<l-layout> 的子元素只能是后四者，后四者的父元素也只能是 <l-layout>。

常见页面布局

header
content
header
content
footer
sider
content
header
sider
content
header
sider
content
footer
sider
header
content
footer
<!-- demo1 -->
<l-layout style="margin: 40px 0">
    <l-header class="header">header</l-header>
    <l-content class="content">content</l-content>
</l-layout>

<!-- demo2 -->
<l-layout style="margin-bottom: 40px">
    <l-header class="header">header</l-header>
    <l-content class="content">content</l-content>
    <l-content class="footer">footer</l-content>
</l-layout>

<!-- demo3 -->
<l-layout style="margin-bottom: 40px">
    <l-sider class="sider">sider</l-sider>
    <l-content class="content">content</l-content>
</l-layout>

<!-- demo4 -->
<l-layout style="margin-bottom: 40px">
    <l-header class="header">header</l-header>
    <l-layout>
        <l-sider class="sider">sider</l-sider>
        <l-content class="content">content</l-content>
    </l-layout>
</l-layout>

<!-- demo5 -->
<l-layout style="margin-bottom: 40px">
    <l-header class="header">header</l-header>
    <l-layout>
        <l-sider class="sider">sider</l-sider>
        <l-layout>
            <l-content class="content">content</l-content>
            <l-footer class="footer">footer</l-footer>
        </l-layout>
    </l-layout>
</l-layout>

<!-- demo6 -->
<l-layout style="margin-bottom: 40px">
    <l-sider class="sider">sider</l-sider>
    <l-layout>
        <l-header class="header">header</l-header>
        <l-content class="content">content</l-content>
        <l-footer class="footer">footer</l-footer>
    </l-layout>
</l-layout>

Layout Attributes

参数 说明 类型 可选值 默认值
direction 排列方向 String horizontal / vertical —

Header Attributes

参数 说明 类型 可选值 默认值
height 高度 String — —

Sider Attributes

参数 说明 类型 可选值 默认值
width 宽度 String — —
参数 说明 类型 可选值 默认值
height 高度 String — —

← Popover - 弹出框 →