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

基本用法

最简单的下拉菜单。

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

<template>
  <Dropdown>
    <a class="text-sm cursor-pointer">
      Hover Me
      <span i-heroicons:chevron-down class=" inline-block align-middle text-gray-400" />
    </a>
    <template #content>
      <DropdownItem>test2</DropdownItem>
      <DropdownItem divider>
        test3
      </DropdownItem>
      <DropdownItem>test4</DropdownItem>
      <DropdownItem title="test5">
        <DropdownItem>
          test7
        </DropdownItem>
        <DropdownItem>test8</DropdownItem>
      </DropdownItem>
      <DropdownItem>test6</DropdownItem>
    </template>
  </Dropdown>
</template>

Right Click on here

右键菜单

默认是移入触发菜单，可以点击鼠标右键触发。弹出菜单位置会跟随右键点击位置变动。

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

<template>
  <Dropdown trigger="contextMenu">
    <div
      class="w-70 h-40 text-gray-400 bg-gray-300 flex-center"
    >
      Right Click on here
    </div>
    <template #content>
      <DropdownItem>test2</DropdownItem>
      <DropdownItem divider>
        test3
      </DropdownItem>
      <DropdownItem>test4</DropdownItem>
      <DropdownItem title="test5">
        <DropdownItem>
          test7
        </DropdownItem>
        <DropdownItem>test8</DropdownItem>
      </DropdownItem>
      <DropdownItem>test6</DropdownItem>
    </template>
  </Dropdown>
</template>

Installation