Space 间距 ​

<script>
  import { Button, Space } from 'adorn-ui'
</script>

<Space>
  Space
  <Button type="primary">Button</Button>
  <Button icon="inbox-unarchive-line">Click to Upload</Button>
  <Button>Confirm</Button>
</Space>

<script>
  import { Button, Space } from 'adorn-ui'
</script>

<Space direction="vertical" style="width: 100%">
  Space
  <Button block type="primary">Button</Button>
  <Button block icon="inbox-unarchive-line">Click to Upload</Button>
  <Button block>Confirm</Button>
</Space>

<script>
  import { Button, Divider, Space } from 'adorn-ui'
  let size = 'small'

  const onChange = v => (size = v)
</script>

<Space direction="vertical" style="width: 100%;">
  <Divider>默认大小类型</Divider>
  <Space>
    <Button type="primary" on:click={() => onChange('small')}>Small</Button>
    <Button type="primary" on:click={() => onChange('middle')}>Middle</Button>
    <Button type="primary" on:click={() => onChange('large')}>Large</Button>
  </Space>
  <Space {size}>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="link">Link</Button>
  </Space>
  <Divider>自定义大小: 32</Divider>
  <Space size={32}>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="link">Link</Button>
  </Space>
</Space>

<script>
  import { Button, Space } from 'adorn-ui'
</script>

<Space wrap>
  <div class="space-align-block">
    <Space align="center">
      center
      <Button type="primary">Primary</Button>
      <span class="mock-block">Block</span>
    </Space>
  </div>
  <div class="space-align-block">
    <Space align="start">
      start
      <Button type="primary">Primary</Button>
      <span class="mock-block">Block</span>
    </Space>
  </div>
  <div class="space-align-block">
    <Space align="end">
      end
      <Button type="primary">Primary</Button>
      <span class="mock-block">Block</span>
    </Space>
  </div>
  <div class="space-align-block">
    <Space align="baseline">
      baseline
      <Button type="primary">Primary</Button>
      <span class="mock-block">Block</span>
    </Space>
  </div>
</Space>

<style>
  .space-align-block {
    border: 1px solid dodgerblue;
    width: calc(50% - 16px);
    text-align: center;
    padding: 16px 0;
  }

  .mock-block {
    background-color: #e0e0e0;
    padding: 32px 8px 16px;
  }
</style>

<script>
  import { Button, Space } from 'adorn-ui'
</script>

<Space size={[8, 16]} wrap>
  {#each new Array(20).fill(null) as i}
    <Button type="primary">Button</Button>
  {/each}
</Space>

<script>
  import { Button, Divider, Space } from 'adorn-ui'
  let size = 'small'

  const onChange = v => (size = v)
</script>

<Space>
  <Divider type="vertical" slot="split" />
  <Button type="link">link</Button>
  <Button type="link">link</Button>
  <Button type="link">link</Button>
</Space>