official/public/docset/ui/wc-space.md

2.7 KiB

间隔组件 (wc-space)

一个简单的flex容器, 会自动把它的子元素之间加一个间距。

使用

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/index.js' 按钮 普通节点

纵向排列 & 分散对齐

只需要简单设置一个属性verticaljustify即可实现。

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/index.js' 纵向排列: vertical 按钮 普通节点

分散对齐: justify 按钮 普通节点

间隔大小

通过设置gap={size}来调整间距。size可选值有xxxl、xxl、xl、l(默认)、m、s,对应的间距分别是24,20,16,12,8,4

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/index.js' 按钮 普通节点 按钮 普通节点 按钮 普通节点 按钮 普通节点 按钮 普通节点 按钮 普通节点
百搭UI库官网
Vue 84.8%
JavaScript 12.7%
HTML 2.5%