kui-vue/components/space/demo/compact-button-vertical.md

A lightweight desktop UI component library suitable for Vue.js 2.

<cn>
### 垂直方向紧凑布局
垂直方向的紧凑布局，目前仅支持 Button 组合。
</cn>

```vue
<template>
  <Space size="middle">
    <Space compact vertical>
      <Button :icon="CloudDownloadOutline"></Button>
      <Button :icon="GameControllerOutline"></Button>
      <Button :icon="HeartOutline"></Button>
      <Button :icon="MailOutline"></Button>
      <Button :icon="ShirtOutline"></Button>
      <Dropdown placement="bottom-left">
        <Button :icon="Ellipsis"></Button>
        <template #overlay>
          <Menu slot="content">
            <MenuItem>
              <a href="javascript:;">1st menu item</a>
            </MenuItem>
            <MenuItem>
              <a href="javascript:;">2nd menu item</a>
            </MenuItem>
            <MenuItem>
              <a href="javascript:;">3rd menu item</a>
            </MenuItem>
          </Menu>
        </template>
      </Dropdown>
    </Space>
    <Space compact vertical>
      <Button theme="dashed">Button1</Button>
      <Button theme="dashed">Button2</Button>
      <Button theme="dashed">Button3</Button>
      <Button theme="dashed">Button4</Button>
    </Space>
    <Space compact vertical>
      <Button>Button1</Button>
      <Button>Button2</Button>
      <Button>Button3</Button>
      <Button>Button4</Button>
    </Space>
  </Space>
</template>
<script setup>
import {
  Copy,
  CloudDownloadOutline,
  Ellipsis,
  GameControllerOutline,
  HeartOutline,
  MailOutline,
  ShirtOutline,
} from "kui-icons";
</script>
```