介绍

让表单组件之间紧凑连接且合并边框。

引入

import Compact from 'sard-uniapp/components/compact/compact.vue'

代码演示

基础使用

使用 Compact 组件包裹按钮组件，即可将按钮变成紧凑布局。

<template>
  <sar-space direction="vertical">
    <sar-compact>
      <sar-button icon="question" />
      <sar-button icon="pencil-square" />
      <sar-button icon="search" />
    </sar-compact>

    <sar-compact>
      <sar-button type="pale" icon="question" />
      <sar-button type="pale" icon="pencil-square" />
      <sar-button type="pale" icon="search" />
    </sar-compact>

    <sar-compact>
      <sar-button type="mild" icon="question" />
      <sar-button type="mild" icon="pencil-square" />
      <sar-button type="mild" icon="search" />
    </sar-compact>

    <sar-compact>
      <sar-button type="outline" icon="question" />
      <sar-button type="outline" icon="pencil-square" />
      <sar-button type="outline" icon="search" />
    </sar-compact>

    <sar-compact>
      <sar-button type="text" icon="question" />
      <sar-button type="text" icon="pencil-square" />
      <sar-button type="text" icon="search" />
    </sar-compact>

    <sar-compact>
      <sar-button type="pale-text" icon="question" />
      <sar-button type="pale-text" icon="pencil-square" />
      <sar-button type="pale-text" icon="search" />
    </sar-compact>

    <sar-compact>
      <sar-button type="default" icon="question" />
      <sar-button type="pale" icon="pencil-square" />
      <sar-button type="outline" icon="plus" />
      <sar-button type="mild" icon="search" />
    </sar-compact>
  </sar-space>
</template>

块级元素

设置 block 属性，按钮会撑满父元素宽度。

<template>
  <sar-space direction="vertical">
    <sar-compact block>
      <sar-button icon="question" />
      <sar-button icon="pencil-square" />
      <sar-button icon="search" />
    </sar-compact>

    <sar-compact block>
      <sar-button type="outline" icon="question" />
      <sar-button type="outline" icon="pencil-square" />
      <sar-button type="outline" icon="search" />
    </sar-compact>
  </sar-space>
</template>

垂直排列

设置 direction="vertical" 可变成垂直方向的紧凑布局，目前仅支持 Button 组合。

<template>
  <sar-space>
    <sar-compact direction="vertical">
      <sar-button icon="question" />
      <sar-button icon="pencil-square" />
      <sar-button icon="search" />
    </sar-compact>

    <sar-compact direction="vertical">
      <sar-button type="outline" icon="question" />
      <sar-button type="outline" icon="pencil-square" />
      <sar-button type="outline" icon="search" />
    </sar-compact>
  </sar-space>
</template>

垂直排列块级元素

可同时设置 direction="vertical" 和 block 属性。

<template>
  <sar-space direction="vertical">
    <sar-compact direction="vertical" block>
      <sar-button icon="question" />
      <sar-button icon="pencil-square" />
      <sar-button icon="search" />
    </sar-compact>

    <sar-compact direction="vertical" block>
      <sar-button type="outline" icon="question" />
      <sar-button type="outline" icon="pencil-square" />
      <sar-button type="outline" icon="search" />
    </sar-compact>
  </sar-space>
</template>

输入类组件

除了按钮，还可以放置 input 类组件。

<template>
  <sar-space direction="vertical">
    <sar-compact>
      <sar-input placeholder="请输入" />
      <sar-input placeholder="请输入" />
    </sar-compact>
    <sar-compact>
      <sar-input placeholder="请输入" style="width: 160rpx" />
      <sar-input placeholder="请输入" />
    </sar-compact>
    <sar-compact>
      <sar-input placeholder="请输入" style="width: 160rpx" />
      <sar-input placeholder="请输入" style="width: 160rpx" />
    </sar-compact>
    <sar-compact>
      <sar-input placeholder="请输入" />
      <sar-button icon="pencil-square" />
    </sar-compact>
    <sar-compact>
      <sar-button>Button</sar-button>
      <sar-input placeholder="请输入" />
      <sar-input placeholder="请输入" />
    </sar-compact>
  </sar-space>
</template>

输入类组件块级元素

设置 block 属性让输入框撑满父元素宽度。

<template>
  <sar-space direction="vertical">
    <sar-compact block>
      <sar-input placeholder="请输入" />
      <sar-input placeholder="请输入" />
    </sar-compact>
    <sar-compact block>
      <sar-input placeholder="请输入" style="width: 160rpx" />
      <sar-input placeholder="请输入" />
    </sar-compact>
    <sar-compact block>
      <sar-input placeholder="请输入" />
      <sar-button icon="pencil-square" class="flex-none" />
    </sar-compact>
    <sar-compact block>
      <sar-button class="flex-none">Button</sar-button>
      <sar-input placeholder="请输入" />
      <sar-input placeholder="请输入" />
    </sar-compact>
    <sar-compact block>
      <sar-button class="flex-none">Button</sar-button>
      <sar-input placeholder="请输入" />
      <sar-button class="flex-none">Button</sar-button>
      <sar-input placeholder="请输入" />
    </sar-compact>
    <sar-compact block>
      <sar-datetime-picker-input
        type="yM"
        :input-props="{ inlaid: false }"
        placeholder="请选择"
      >
        <template #arrow>
          <sar-icon name="down" />
        </template>
      </sar-datetime-picker-input>

      <sar-input placeholder="请输入" />

      <sar-datetime-picker-input
        type="yM"
        :input-props="{ inlaid: false }"
        placeholder="请选择"
      >
        <template #arrow>
          <sar-icon name="down" />
        </template>
      </sar-datetime-picker-input>
    </sar-compact>
  </sar-space>
</template>

API

CompactProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
block	变成块级元素，让按钮或输入框撑满父元素宽度	boolean	false
direction	排列的方向	'horizontal' | 'vertical'	'horizontal'

CompactSlots

插槽	描述	属性
default	自定义默认内容	-