国内外免费域名解析网站,域名申请备案,途牛旅游网,廊坊网站快速排名优化虽然我们拥有 Divider 组件#xff0c;但很多时候我们需要不是一个被 Divider 组件 分割开的页面结构#xff0c;因此我们会重复的使用很多的 Divider 组件#xff0c;这在我们的开发效率上造成了一定的困扰。 间距组件就是为了解决这种困扰应运而生的。
基础用法#
最基础…虽然我们拥有 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-itemscenterclass类名string / object / array—direction排列的方向enumhorizontalprefix-cls给 space-items 的类名前缀string—style额外样式string / object—spacer间隔符string / number / VNode—size间隔大小enum / number / arraysmallwrap设置是否自动折行booleanfalsefill子元素是否填充父容器booleanfalsefill-ratio填充父容器的比例number100
Slots#
名称说明default需要添加间隔的元素
源代码#
组件 • 文档
