Layout 布局

7/11/2022 布局容器

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

# 基础布局

import { HiLayout } from 'hi-kits/layout'
1

# 垂直排列

  <h-layout class="layoutBox"></h-layout>
  <h-layout class="layoutBox layoutBoxo"></h-layout>

1
2
3
Expand Copy

# row 水平排列

<h-layout row>
  <h-layout class="layoutBox"></h-layout>
  <h-layout class="layoutBox layoutBoxo"></h-layout>
</h-layout>

1
2
3
4
5
Expand Copy

# expand 水平填充

根据剩余空间填充(主轴方向)

<h-layout row>
  <h-layout class="layoutBox" expand></h-layout>
  <h-layout class="layoutBox layoutBoxo"></h-layout>
</h-layout>

1
2
3
4
5
Expand Copy

# center 水平垂直居中

<h-layout center style="height:200px">
  <h-layout class="layoutBox layoutBoxo"></h-layout>
</h-layout>

1
2
3
4
Expand Copy

# center=mainAxis 以主轴方向居中

<h-layout center="mainAxis" style="height:200px">
  <h-layout class="layoutBox layoutBoxo"></h-layout>
</h-layout>

1
2
3
4
Expand Copy

# center=crosAxis 以纵轴方向居中

<h-layout center="crosAxis" style="height:200px">
  <h-layout class="layoutBox layoutBoxo"></h-layout>
</h-layout>

1
2
3
4
Expand Copy

# 简单的示例

头部 内容区域 底部
<h-layout class="layout">
    <h-layout class="header">头部</h-layout>
    <h-layout row expand>
        <h-layout class="side"></h-layout>
        <h-layout expand center class="main">
            <h-layout center class="box">内容区域</h-layout>
        </h-layout>
        <h-layout class="side"></h-layout>
    </h-layout>
    <h-layout class="footer">底部</h-layout>
</h-layout>

<style>
  h-layout{ background: #2196f380; }
  .layoutBox{
    width: 100px;
    height: 100px;
    color: #fff;
  }
  .layoutBoxo{
    background: rgba(33, 243, 103, 0.5);
  }
  .layout{ width: 100%; height: 300px; }
  .side{ width: 200px; }
  .main{ margin: 0 10px; }
  .box{ width: 100px; height: 100px; color: #fff; }
  .header,.footer{ padding: 5px 10px; color: #fff; }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Expand Copy

# 参数说明

参数 说明 类型 可选值 默认值
row 水平排列 boolean - false
expand 根据剩余空间填充(主轴方向 boolean - -
center 居中 string | boolean mainAxis | crosAxis | boolean boolean
Last Updated: 4/25/2023, 16:14:30