Sard

Appearance

100%
在新窗口打开⤴

Compact紧凑布局

介绍 ​

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

代码演示 ​

基础使用 ​

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

vue
<template>
  <s-flex vertical gap="medium">
    <s-compact>
      <s-button #icon>
        <Question />
      </s-button>
      <s-button #icon>
        <PencilSquare />
      </s-button>
      <s-button #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="filled" #icon>
        <Question />
      </s-button>
      <s-button variant="filled" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="filled" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="text" #icon>
        <Question />
      </s-button>
      <s-button variant="text" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="text" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="link" #icon>
        <Question />
      </s-button>
      <s-button variant="link" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="link" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="solid" #icon>
        <Question />
      </s-button>
      <s-button variant="filled" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Plus />
      </s-button>
      <s-button variant="filled" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="ts">
import { PencilSquare, Plus, Question, Search } from '@sard/icons'
</script>
vue
<template>
  <s-flex vertical gap="medium">
    <s-compact>
      <s-button #icon>
        <Question />
      </s-button>
      <s-button #icon>
        <PencilSquare />
      </s-button>
      <s-button #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="filled" #icon>
        <Question />
      </s-button>
      <s-button variant="filled" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="filled" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="text" #icon>
        <Question />
      </s-button>
      <s-button variant="text" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="text" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="link" #icon>
        <Question />
      </s-button>
      <s-button variant="link" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="link" #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact>
      <s-button variant="solid" #icon>
        <Question />
      </s-button>
      <s-button variant="filled" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Plus />
      </s-button>
      <s-button variant="filled" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="js">
import { PencilSquare, Plus, Question, Search } from '@sard/icons'
</script>

块级元素 ​

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

vue
<template>
  <s-flex vertical gap="medium">
    <s-compact block>
      <s-button block #icon>
        <Question />
      </s-button>
      <s-button block #icon>
        <PencilSquare />
      </s-button>
      <s-button block #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact block>
      <s-button block variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button block variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button block variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="ts">
import { PencilSquare, Question, Search } from '@sard/icons'
</script>
vue
<template>
  <s-flex vertical gap="medium">
    <s-compact block>
      <s-button block #icon>
        <Question />
      </s-button>
      <s-button block #icon>
        <PencilSquare />
      </s-button>
      <s-button block #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact block>
      <s-button block variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button block variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button block variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="js">
import { PencilSquare, Question, Search } from '@sard/icons'
</script>

垂直排列 ​

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

vue
<template>
  <s-flex gap="medium">
    <s-compact direction="vertical">
      <s-button #icon>
        <Question />
      </s-button>
      <s-button #icon>
        <PencilSquare />
      </s-button>
      <s-button #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact direction="vertical">
      <s-button variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="ts">
import { PencilSquare, Question, Search } from '@sard/icons'
</script>
vue
<template>
  <s-flex gap="medium">
    <s-compact direction="vertical">
      <s-button #icon>
        <Question />
      </s-button>
      <s-button #icon>
        <PencilSquare />
      </s-button>
      <s-button #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact direction="vertical">
      <s-button variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="js">
import { PencilSquare, Question, Search } from '@sard/icons'
</script>

垂直排列块级元素 ​

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

vue
<template>
  <s-flex vertical gap="medium">
    <s-compact direction="vertical" block>
      <s-button #icon>
        <Question />
      </s-button>
      <s-button #icon>
        <PencilSquare />
      </s-button>
      <s-button #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact direction="vertical" block>
      <s-button variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="ts">
import { PencilSquare, Question, Search } from '@sard/icons'
</script>
vue
<template>
  <s-flex vertical gap="medium">
    <s-compact direction="vertical" block>
      <s-button #icon>
        <Question />
      </s-button>
      <s-button #icon>
        <PencilSquare />
      </s-button>
      <s-button #icon>
        <Search />
      </s-button>
    </s-compact>

    <s-compact direction="vertical" block>
      <s-button variant="outlined" #icon>
        <Question />
      </s-button>
      <s-button variant="outlined" #icon>
        <PencilSquare />
      </s-button>
      <s-button variant="outlined" #icon>
        <Search />
      </s-button>
    </s-compact>
  </s-flex>
</template>

<script setup lang="js">
import { PencilSquare, Question, Search } from '@sard/icons'
</script>

输入类组件 ​

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

vue
<template>
  <s-flex vertical gap="medium">
    <s-compact block>
      <s-input v-model="value" placeholder="请输入" />
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-input v-model="value" placeholder="请输入" style="width: 80px" />
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-input v-model="value" placeholder="请输入" />
      <s-button>
        <PencilSquare />
      </s-button>
    </s-compact>
    <s-compact block>
      <s-button>
        <Search />
      </s-button>
      <s-input v-model="value" placeholder="请输入" />
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-button>
        <Search />
      </s-button>
      <s-input v-model="value" placeholder="请输入" />
      <s-button>
        <PencilSquare />
      </s-button>
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-datetime-picker-input type="yM" :input-props="{ inlaid: false }" placeholder="请选择">
        <template #arrow>
          <Down />
        </template>
      </s-datetime-picker-input>

      <s-input v-model="value" placeholder="请输入" />

      <s-datetime-picker-input type="yM" :input-props="{ inlaid: false }" placeholder="请选择">
        <template #arrow>
          <Down />
        </template>
      </s-datetime-picker-input>
    </s-compact>
  </s-flex>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Down, PencilSquare, Search } from '@sard/icons'

const value = ref('')
</script>
vue
<template>
  <s-flex vertical gap="medium">
    <s-compact block>
      <s-input v-model="value" placeholder="请输入" />
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-input v-model="value" placeholder="请输入" style="width: 80px" />
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-input v-model="value" placeholder="请输入" />
      <s-button>
        <PencilSquare />
      </s-button>
    </s-compact>
    <s-compact block>
      <s-button>
        <Search />
      </s-button>
      <s-input v-model="value" placeholder="请输入" />
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-button>
        <Search />
      </s-button>
      <s-input v-model="value" placeholder="请输入" />
      <s-button>
        <PencilSquare />
      </s-button>
      <s-input v-model="value" placeholder="请输入" />
    </s-compact>
    <s-compact block>
      <s-datetime-picker-input type="yM" :input-props="{ inlaid: false }" placeholder="请选择">
        <template #arrow>
          <Down />
        </template>
      </s-datetime-picker-input>

      <s-input v-model="value" placeholder="请输入" />

      <s-datetime-picker-input type="yM" :input-props="{ inlaid: false }" placeholder="请选择">
        <template #arrow>
          <Down />
        </template>
      </s-datetime-picker-input>
    </s-compact>
  </s-flex>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { Down, PencilSquare, Search } from '@sard/icons'
const value = ref('')
</script>

API ​

CompactProps ​

属性描述类型默认值
block变成块级元素，让按钮或输入框撑满父元素宽度booleanfalse
direction排列的方向'horizontal' | 'vertical''horizontal'

CompactSlots ​

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

Released under the MIT License.

Copyright © 2023-present wuzhitao