View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnDropdown 组件的一些特性和用法。

用法 ​

查看代码
vue
<template>
  <ShadcnDropdown trigger="click">
    <template #trigger>
      <ShadcnButton>Click Open</ShadcnButton>
    </template>
    <ShadcnDropdownItem>Option 1</ShadcnDropdownItem>
    <ShadcnDropdownItem active>Option 2</ShadcnDropdownItem>
    <ShadcnDropdownItem disabled>Option 3</ShadcnDropdownItem>
  </ShadcnDropdown>
  <ShadcnDropdown trigger="hover">
    <template #trigger>
      <ShadcnButton>Hover Open</ShadcnButton>
    </template>
    <ShadcnDropdownItem>Option 1</ShadcnDropdownItem>
    <ShadcnDropdownItem active>Option 2</ShadcnDropdownItem>
    <ShadcnDropdownItem disabled>Option 3</ShadcnDropdownItem>
  </ShadcnDropdown>
</template>

<script setup lang="ts">
</script>

分割线 (divided) ​

查看代码
vue
<template>
  <ShadcnDropdown trigger="click" divided>
    <template #trigger>
      <ShadcnButton>Click Open</ShadcnButton>
    </template>
    <ShadcnDropdownItem>Option 1</ShadcnDropdownItem>
    <ShadcnDropdownItem active>Option 2</ShadcnDropdownItem>
    <ShadcnDropdownItem disabled>Option 3</ShadcnDropdownItem>
  </ShadcnDropdown>
</template>

<script setup lang="ts">
</script>

位置 (position) ​

查看代码
vue
<template>
    <ShadcnDropdown trigger="hover" position="left">
      <template #trigger>
        <ShadcnButton>Left</ShadcnButton>
      </template>
      <ShadcnDropdownItem>Option 1</ShadcnDropdownItem>
      <ShadcnDropdownItem active>Option 2</ShadcnDropdownItem>
      <ShadcnDropdownItem disabled>Option 3</ShadcnDropdownItem>
    </ShadcnDropdown>

    <ShadcnDropdown trigger="click" position="right">
      <template #trigger>
        <ShadcnButton>Right</ShadcnButton>
      </template>
      <ShadcnDropdownItem>Option 1</ShadcnDropdownItem>
      <ShadcnDropdownItem active>Option 2</ShadcnDropdownItem>
      <ShadcnDropdownItem disabled>Option 3</ShadcnDropdownItem>
    </ShadcnDropdown>

    <ShadcnDropdown trigger="hover" position="top">
      <template #trigger>
        <ShadcnButton>Hover Open</ShadcnButton>
      </template>
      <ShadcnDropdownItem>Option 1</ShadcnDropdownItem>
      <ShadcnDropdownItem active>Option 2</ShadcnDropdownItem>
      <ShadcnDropdownItem disabled>Option 3</ShadcnDropdownItem>
    </ShadcnDropdown>

    <ShadcnDropdown trigger="hover" position="bottom">
      <template #trigger>
        <ShadcnButton>Hover Open</ShadcnButton>
      </template>
      <ShadcnDropdownItem>Option 1</ShadcnDropdownItem>
      <ShadcnDropdownItem active>Option 2</ShadcnDropdownItem>
      <ShadcnDropdownItem disabled>Option 3</ShadcnDropdownItem>
    </ShadcnDropdown>
</template>

<script setup lang="ts">
</script>

液态玻璃效果 (glass) ​

查看代码
vue
<template>
  <div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
    <div class="p-8 rounded-lg bg-white/50 flex gap-4">
      <ShadcnDropdown glass trigger="click">
        <template #trigger>
          <ShadcnButton>点击打开</ShadcnButton>
        </template>
        <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
        <ShadcnDropdownItem active>操作 2</ShadcnDropdownItem>
        <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
        <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
      </ShadcnDropdown>
    </div>
  </div>
</template>

下拉菜单 (Dropdown) 属性 ​

下拉菜单项 (DropdownItem) 属性 ​

下拉菜单 (Dropdown) 插槽 ​

下拉菜单 (Dropdown) 事件 ​

下拉菜单项 (DropdownItem) 事件 ​