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>

下拉菜单 (Dropdown) 属性 ​

下拉菜单项 (DropdownItem) 属性 ​

下拉菜单 (Dropdown) 插槽 ​

下拉菜单 (Dropdown) 事件 ​

下拉菜单项 (DropdownItem) 事件 ​