mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
88 lines
3.0 KiB
Markdown
88 lines
3.0 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Layout 栅格
|
||
|
||
## 概述
|
||
<ClientOnly>
|
||
<row class="article-row">
|
||
<cell span="24">span24: 100%</cell>
|
||
</row>
|
||
<row class="article-row">
|
||
<cell span="12">span12: 50%</cell>
|
||
<cell span="12">span12: 50%</cell>
|
||
</row>
|
||
<row class="article-row">
|
||
<cell span="8">span8: 33.3333%</cell>
|
||
<cell span="8">span8: 33.3333%</cell>
|
||
<cell span="8">span8: 33.3333%</cell>
|
||
</row>
|
||
<row class="article-row">
|
||
<cell span="6">span6: 25%</cell>
|
||
<cell span="6">span6: 25%</cell>
|
||
<cell span="6">span6: 25%</cell>
|
||
<cell span="6">span6: 25%</cell>
|
||
</row>
|
||
<row class="article-row">
|
||
<cell span="8" offset="8">offset8 span8</cell>
|
||
</row>
|
||
</ClientOnly>
|
||
|
||
采用了24栅格的概念，相比Bootstrp的12格，它可以实现更精细的布局比例。解决常用的布局问题、对齐问题、宽度自适应等问题。
|
||
|
||
定义了两个概念，行Row和列Cell，具体使用方法如下：
|
||
* 使用 Row 在水平方向创建一行
|
||
* 将一组 Cell 插入 Row 中
|
||
* 在 Cell 写入自己的内容
|
||
* 通过设置 Cell 的span来控制 Cell 的宽度
|
||
* 通过设置 Cell 的offset来控制 Cell 往右的偏移
|
||
|
||
## 代码示例
|
||
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/layout/1.html">
|
||
<template v-slot:demo>
|
||
<row class="article-row">
|
||
<cell span="24">span24</cell>
|
||
</row>
|
||
<row class="article-row">
|
||
<cell span="12">span12</cell>
|
||
<cell span="12">span12</cell>
|
||
</row>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>水平排列的布局，Cell必须放在Row里面</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="向右偏移" template="ui/templates/layout/2.html">
|
||
<template v-slot:demo>
|
||
<row class="article-row">
|
||
<cell span="24">span24</cell>
|
||
</row>
|
||
<row class="article-row">
|
||
<cell span="12">span12</cell>
|
||
<cell span="12">span12</cell>
|
||
</row>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>通过设置offset属性，将列进行右偏移，偏移栅格数为offset的值</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</row>
|
||
</ClientOnly>
|
||
|
||
## API
|
||
|
||
### Cell props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| span | 栅格的占位格数，可选值为0~24的整数 | String\|Number | null |
|
||
| offset | 栅格的向右偏移数，可选值为0~24的整数 | String\|Number | null |
|
||
|