Skip to content

Commit 15bb65b

Browse files
lepturelepture
committed
docs: update dropdown docs
1 parent 020043c commit 15bb65b

2 files changed

Lines changed: 101 additions & 0 deletions

File tree

‎docs/content/components/dropdown.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,46 @@ radix: https://www.radix-ui.com/themes/docs/components/dropdown-menu
88
---
99

1010
<Example name="dropdown/Overview.vue" variant="hide" />
11+
12+
## API Reference
13+
14+
### DropdownMenuRoot
15+
16+
Contains all the parts of a dropdown menu.
17+
18+
<PropsTable name="DropdownMenuRoot" />
19+
20+
### DropdownMenuTrigger
21+
22+
Wraps the control that will open the dropdown menu. Usually used with `Button`:
23+
24+
```vue
25+
<template>
26+
<DropdownMenuRoot>
27+
<DropdownMenuTrigger as-child>
28+
<Button>Show dropdown menu</Button>
29+
</DropdownMenuTrigger>
30+
<DropdownMenuContent>...</DropdownMenuContent>
31+
</DropdownMenuRoot>
32+
</template>
33+
```
34+
35+
<PropsTable name="DropdownMenuTrigger" />
36+
37+
### DropdownMenuContent
38+
39+
The component that pops out when the dropdown menu is open.
40+
41+
<PropsTable name="DropdownMenuContent" />
42+
43+
### DropdownMenuItem
44+
45+
The component that contains the dropdown menu items.
46+
47+
<PropsTable name="DropdownMenuItem" />
48+
49+
## Examples
50+
51+
### Variant
52+
53+
<Example name="dropdown/Variant.vue" />

‎docs/examples/dropdown/Variant.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup lang="ts">
2+
import {
3+
Button,
4+
DropdownMenuRoot,
5+
DropdownMenuTrigger,
6+
DropdownMenuContent,
7+
DropdownMenuItem,
8+
DropdownMenuSeparator,
9+
} from '#components'
10+
import CaretDownIcon from '~icons/radix-icons/caret-down'
11+
</script>
12+
13+
<template>
14+
<div class="flex items-center gap-4">
15+
<DropdownMenuRoot>
16+
<DropdownMenuTrigger>
17+
<Button variant="solid">
18+
Solid
19+
<CaretDownIcon />
20+
</Button>
21+
</DropdownMenuTrigger>
22+
<DropdownMenuContent variant="solid">
23+
<DropdownMenuItem shortcut="⌘ E">Edit</DropdownMenuItem>
24+
<DropdownMenuItem shortcut="⌘ D">Duplicate</DropdownMenuItem>
25+
<DropdownMenuSeparator />
26+
<DropdownMenuItem shortcut="⌘ N">Archive</DropdownMenuItem>
27+
<DropdownMenuSeparator />
28+
<DropdownMenuItem>Share</DropdownMenuItem>
29+
<DropdownMenuItem>Add to favorites</DropdownMenuItem>
30+
<DropdownMenuSeparator />
31+
<DropdownMenuItem shortcut="⌘ ⌫" color="red">
32+
Delete
33+
</DropdownMenuItem>
34+
</DropdownMenuContent>
35+
</DropdownMenuRoot>
36+
<DropdownMenuRoot>
37+
<DropdownMenuTrigger>
38+
<Button variant="soft">
39+
Soft
40+
<CaretDownIcon />
41+
</Button>
42+
</DropdownMenuTrigger>
43+
<DropdownMenuContent variant="soft">
44+
<DropdownMenuItem shortcut="⌘ E">Edit</DropdownMenuItem>
45+
<DropdownMenuItem shortcut="⌘ D">Duplicate</DropdownMenuItem>
46+
<DropdownMenuSeparator />
47+
<DropdownMenuItem shortcut="⌘ N">Archive</DropdownMenuItem>
48+
<DropdownMenuSeparator />
49+
<DropdownMenuItem>Share</DropdownMenuItem>
50+
<DropdownMenuItem>Add to favorites</DropdownMenuItem>
51+
<DropdownMenuSeparator />
52+
<DropdownMenuItem shortcut="⌘ ⌫" color="red">
53+
Delete
54+
</DropdownMenuItem>
55+
</DropdownMenuContent>
56+
</DropdownMenuRoot>
57+
</div>
58+
</template>

0 commit comments

Comments
 (0)