blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity
fes.js/packages/fes-doc/docs/ui/layout.md
万纯 b0b3fcc68e fes-ui v0.1.1 
1、修复Layout组件offset不生效的bug

fes-doc
1、更新文档中描述不准备的地方
2、更换文档中的链接
2020-09-25 17:59:16 +08:00

3.0 KiB
Raw Blame History

pageClass
comp-page-class

Layout 栅格

概述

span24: 100% span12: 50% span12: 50% span8: 33.3333% span8: 33.3333% span8: 33.3333% span6: 25% span6: 25% span6: 25% span6: 25% offset8 span8

采用了24栅格的概念，相比Bootstrp的12格，它可以实现更精细的布局比例。解决常用的布局问题、对齐问题、宽度自适应等问题。

定义了两个概念，行Row和列Cell，具体使用方法如下：

  • 使用 Row 在水平方向创建一行
  • 将一组 Cell 插入 Row 中
  • 在 Cell 写入自己的内容
  • 通过设置 Cell 的span来控制 Cell 的宽度
  • 通过设置 Cell 的offset来控制 Cell 往右的偏移

代码示例

span24 span12 span12

水平排列的布局，Cell必须放在Row里面

span8|offset8 span12|offset12

通过设置offset属性，将列进行右偏移，偏移栅格数为offset的值

API

Cell props

属性 说明 类型 默认值
span 栅格的占位格数，可选值为0~24的整数 String|Number null
offset 栅格的向右偏移数，可选值为0~24的整数 String|Number null