lite-space/ui | A Vue3 based UnoCSS UI library

Installation

按钮类型

按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

<script setup lang="ts">
  import { Button, Space } from '@lite-space/ui'
</script>

<template>
  <Space>
    <Button>button</Button>
    <Button type="text">
      Text Button
    </Button>
    <Button type="primary">
      Primary Button
    </Button>
    <Button type="link">
      Link button
    </Button>
  </Space>
</template>

Block 按钮

block 属性将使按钮适合其父宽度。

<script setup lang="ts">
  import { Button } from '@lite-space/ui'
</script>

<template>
  <Button block>
    button
  </Button>
  <Button type="text" block>
    Text Button
  </Button>
  <Button type="primary" block>
    Primary Button
  </Button>
  <Button type="link" block>
    Link button
  </Button>
</template>

危险按钮

自定义为红色按钮。

<script setup lang="ts">
  import { Button, Space } from '@lite-space/ui'
</script>

<template>
  <Space>
    <Button danger>
      button
    </Button>
    <Button type="text" danger>
      Text Button
    </Button>
    <Button type="primary" danger>
      Primary Button
    </Button>
    <Button type="link" danger>
      Link button
    </Button>
  </Space>
</template>

不可用状态

添加 disabled 属性即可让按钮处于不可用状态。

<script setup lang="ts">
  import { Button, Space } from '@lite-space/ui'
</script>

<template>
  <Space>
    <Button disabled>
      button
    </Button>
    <Button type="text" disabled>
      Text Button
    </Button>
    <Button type="primary" disabled>
      Primary Button
    </Button>
    <Button type="link" disabled>
      Link button
    </Button>
  </Space>
</template>

按钮图标

可以通过 icon 属性添加图标。

<script setup lang="ts">
  import { Button, Space } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical" class="grid gap-1">
    <div>
      <Button icon="i-carbon:search">
        Button
      </Button>
      <Button type="text" icon="i-carbon:search">
        Text Button
      </Button>
    </div>
    <div>
      <Button
        type="primary"
        icon="i-carbon:email"
        danger
        icon-position="end"
      >
        Primary Button
      </Button>
      <Button type="link" icon="i-carbon:search" danger>
        button link
      </Button>
    </div>
    <div>
      <Space>
        <Button type="primary" icon="i-carbon:search " danger />
        <Button
          type="primary"
          icon="i-carbon:search "
          danger
          circle
        />
      </Space>
    </div>
    <div>
      <Space>
        <Button icon="i-carbon:logo-github" />
        <Button icon="i-carbon:logo-github" circle />
      </Space>
    </div>
    <div>
      <Button type="primary">
        <template #icon>
          <span i-carbon:3d-cursor />
        </template>
        icon slot
      </Button>
    </div>
  </Space>
</template>

移除两个汉字之间的空格

默认在只有中文字符之间会有一个空格，可以通过 autoInsertSpaceInButton 属性来移除。

<script setup lang="ts">
  import { Button, Space } from '@lite-space/ui'
</script>

<template>
  <Space>
    <Button auto-insert-space>
      取消
    </Button>
    <Button
      type="primary"
      auto-insert-space
    >
      确认
    </Button>
    <Button
      type="primary"
    >
      确认了吗?
    </Button>
    <Button
      type="primary"
    >
      <div>
        <span>span</span>
        <span>test</span>
      </div>
    </Button>
  </Space>
</template>