108 lines
2.7 KiB
Markdown
108 lines
2.7 KiB
Markdown
|
## 间隔组件 (`wc-space`)
|
||
|
|
> 一个简单的flex容器, 会自动把它的子元素之间加一个间距。
|
||
|
|
|
||
|
|
|
||
|
|
### 使用
|
||
|
|
|
||
|
|
<wc-sandbox>
|
||
|
|
<wc-lang slot="javascript">
|
||
|
|
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||
|
|
import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||
|
|
</wc-lang>
|
||
|
|
<wc-lang slot="html">
|
||
|
|
<wc-space>
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
</wc-lang>
|
||
|
|
</wc-sandbox>
|
||
|
|
|
||
|
|
|
||
|
|
### 纵向排列 & 分散对齐
|
||
|
|
|
||
|
|
只需要简单设置一个属性`vertical`和`justify`即可实现。
|
||
|
|
|
||
|
|
<wc-sandbox>
|
||
|
|
<wc-lang slot="javascript">
|
||
|
|
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||
|
|
import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||
|
|
</wc-lang>
|
||
|
|
<wc-lang slot="html">
|
||
|
|
纵向排列: vertical
|
||
|
|
<wc-space vertical style="width:200px">
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
|
||
|
|
分散对齐: justify
|
||
|
|
<wc-space justify>
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
</wc-lang>
|
||
|
|
</wc-sandbox>
|
||
|
|
|
||
|
|
### 间隔大小
|
||
|
|
|
||
|
|
通过设置`gap={size}`来调整间距。`size`可选值有`xxxl、xxl、xl、l(默认)、m、s`,对应的间距分别是`24,20,16,12,8,4`
|
||
|
|
|
||
|
|
|
||
|
|
<wc-sandbox>
|
||
|
|
<wc-lang slot="javascript">
|
||
|
|
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||
|
|
import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||
|
|
</wc-lang>
|
||
|
|
<wc-lang slot="html">
|
||
|
|
<wc-space gap="s">
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
<wc-space gap="m">
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
<wc-space gap="l">
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
<wc-space gap="xl">
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
<wc-space gap="xxl">
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
<wc-space gap="xxxl">
|
||
|
|
<wc-button>按钮</wc-button>
|
||
|
|
<wc-input></wc-input>
|
||
|
|
<wc-button icon="home"></wc-button>
|
||
|
|
<wc-icon name="info"></wc-icon>
|
||
|
|
<span>普通节点</span>
|
||
|
|
</wc-space>
|
||
|
|
</wc-lang>
|
||
|
|
</wc-sandbox>
|