虽然我们拥有Divider 组件，但很多时候我们需要不是一个被Divider 组件分割开的页面结构，因此我们会重复的使用很多的Divider 组件，这在我们的开发效率上造成了一定的困扰。间距组件就是为了解决这种困扰应运而生的。
基础用法#
最基础的用法，通过这个组件来给组件之间提供统一的间距。
通过间距组件来给多个组件之间提供间距
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
垂直布局#
使用direction来控制布局的方式, 背后实际上是利用了flex-direction来控制.
我们也提供垂直布局方式。
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
控制间距的大小#
通过调整size的值来控制间距的大小
使用内置的small、default、large来设置间距大小，分别对应8px、12px和16px的间距。 默认的间距大小为small，也就是8px。
您也可以通过自定义的 size 来控制大小， 参见下一个部分。
largedefaultsmall
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
自定义 Size#
很多时候，内建的大小不满足设计师的要求，我们可以通过传入自己定义的大小 (数值类型) 来设置。
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
TIP
不要让ElSpace与使用依赖父元素百分比宽度（或高度）的元素一起使用（例如ElSlider），这样会造成光标不同步。
自动换行#
在水平 (horizontal) ** 模式下, 通过控制wrap（布尔类型）**来控制是否自动换行
利用wrap属性控制换行
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
Text button
行间分隔符#
有时候，仅仅在行间加空白并不能满足我们的日常需求，此时分隔符 (spacer) 就可以发挥非常好的作用了。
字母数字类型分隔符#
button 1
|
button 2
分隔符还可以是 VNode 类型#
button 1
button 2
对齐方式#
设置该值可服务器托管网以调整所有子节点在容器内的对齐方式，可设置的值与align-items一致。
使用alignment属性来对齐
string
button
header
body
string
button
header
body
string
button
header
body
填充容器#
通过fill**（布尔类型）**参数，您可以控制子节点是否自动填充容器。
下面的例子中，当设置为fill时，子节点的宽度会自动适配容器的宽度。
用 fill 属性让子节点自动填充容器
fill:
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
也可以使用fillRatio参数，自定义填充的比例， 默认值为100，代表基于父容器宽度的100%进行填充
需要注意的是，水平布局和垂直布局的表现形式稍有不同，具体的效果可以查看下面的例子
用 fillRatio 自定义填充比例
direction:horizontalvertical
fillRatio:
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List item 1
List item 2
List item 3
List item 4
Card nameOperation button
List 服务器托管网item 1
List item 2
List item 3
List item 4
API#
Attributes#
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| alignment | 对齐的方式 |
enum align-items
|
center |
| class | 类名 |
string / object / array
|
— |
| direction | 排列的方向 | enum |
horizontal |
| prefix-cls | 给 space-items 的类名前缀 | string |
— |
| style | 额外样式 |
string / object
|
— |
| spacer | 间隔符 |
string / number / VNode
|
— |
| size | 间隔大小 |
enum / number / array
|
small |
| wrap | 设置是否自动折行 | boolean |
false |
| fill | 子元素是否填充父容器 | boolean |
false |
| fill-ratio | 填充父容器的比例 | number |
100 |
Slots#
| 名称 | 说明 |
|---|---|
| default | 需要添加间隔的元素 |
源代码#
组件•文档
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
相关推荐: WebAssembly核心编程[3]: Module 与 Instance
WebAssembly程序总是以模块来组织，模块是基本的部署、加载和编译单元。在JavaScript编程接口中，模块通过WebAssembly.Module类型表示。WebAssembly.Module通过加载的.wasm二进制文件创建而成，它承载了描述was…
