Skip to content

SpaceCompact 紧凑组合

让多个输入类组件视觉上贴边拼接为一组紧凑控件,作为独立顶层组件存在(不通过 Space.Compact 静态属性挂载)。

<c-space> 的差异

  • <c-space> 子项之间留 gap,视觉上是独立组件
  • <c-space-compact> 子项之间贴边合并:相邻 border 重叠(margin: -1px)、圆角合并(中间项 border-radius: 0、首尾项分别保留外侧圆角)

适合「Input + 选择器 + 按钮」类组合(搜索框 + 搜索按钮、Input + InputNumber、Select + Input 等)。

基本使用

多个输入拼接

纵向紧凑

block 撑满父容器

SpaceCompact 参数

参数类型默认说明
direction'horizontal' | 'vertical''horizontal'紧凑布局方向
size'large' | 'middle' | 'small''middle'控件尺寸(透传到子项 SCSS modifier)
blockbooleanfalse撑满父容器宽度

SpaceCompact 插槽

插槽名说明
default紧凑组合的子控件(input / button 等)

Released under the MIT License.