Skip to content

Commit e5f1901

Browse files
author
Marcus Stöhr
committed
feat(toolkit): add dropdown-menu component for shadcn kit
1 parent 2553ed3 commit e5f1901

22 files changed

+1284
-0
lines changed

‎src/Toolkit/kits/shadcn/dropdown-menu/EXAMPLES.md‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true,"height":"360px"}
6+
<twig:DropdownMenu id="example_default">
7+
<twig:DropdownMenu:Trigger>
8+
<twig:Button {{ ...trigger_attrs }} variant="outline">Open</twig:Button>
9+
</twig:DropdownMenu:Trigger>
10+
<twig:DropdownMenu:Content class="w-56">
11+
<twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
12+
<twig:DropdownMenu:Separator />
13+
<twig:DropdownMenu:Group>
14+
<twig:DropdownMenu:Item>
15+
<twig:ux:icon name="lucide:user" class="size-4" />
16+
Profile
17+
<twig:Kbd class="ml-auto">⇧⌘P</twig:Kbd>
18+
</twig:DropdownMenu:Item>
19+
<twig:DropdownMenu:Item>
20+
<twig:ux:icon name="lucide:credit-card" class="size-4" />
21+
Billing
22+
<twig:Kbd class="ml-auto">⌘B</twig:Kbd>
23+
</twig:DropdownMenu:Item>
24+
<twig:DropdownMenu:Item>
25+
<twig:ux:icon name="lucide:settings" class="size-4" />
26+
Settings
27+
<twig:Kbd class="ml-auto">⌘S</twig:Kbd>
28+
</twig:DropdownMenu:Item>
29+
<twig:DropdownMenu:Item>
30+
<twig:ux:icon name="lucide:keyboard" class="size-4" />
31+
Keyboard shortcuts
32+
<twig:Kbd class="ml-auto">⌘K</twig:Kbd>
33+
</twig:DropdownMenu:Item>
34+
</twig:DropdownMenu:Group>
35+
<twig:DropdownMenu:Separator />
36+
<twig:DropdownMenu:Group>
37+
<twig:DropdownMenu:Item>
38+
<twig:ux:icon name="lucide:users" class="size-4" />
39+
Team
40+
</twig:DropdownMenu:Item>
41+
<twig:DropdownMenu:Item disabled>
42+
<twig:ux:icon name="lucide:cloud" class="size-4" />
43+
API
44+
</twig:DropdownMenu:Item>
45+
</twig:DropdownMenu:Group>
46+
<twig:DropdownMenu:Separator />
47+
<twig:DropdownMenu:Item>
48+
<twig:ux:icon name="lucide:log-out" class="size-4" />
49+
Log out
50+
<twig:Kbd class="ml-auto">⇧⌘Q</twig:Kbd>
51+
</twig:DropdownMenu:Item>
52+
</twig:DropdownMenu:Content>
53+
</twig:DropdownMenu>
54+
```
55+
56+
## Checkboxes
57+
58+
```twig {"preview":true,"height":"320px"}
59+
<twig:DropdownMenu id="example_checkboxes">
60+
<twig:DropdownMenu:Trigger>
61+
<twig:Button {{ ...trigger_attrs }} variant="outline">Open</twig:Button>
62+
</twig:DropdownMenu:Trigger>
63+
<twig:DropdownMenu:Content class="w-56">
64+
<twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
65+
<twig:DropdownMenu:Separator />
66+
<twig:DropdownMenu:CheckboxItem checked>
67+
Status Bar
68+
</twig:DropdownMenu:CheckboxItem>
69+
<twig:DropdownMenu:CheckboxItem checked>
70+
Activity Bar
71+
</twig:DropdownMenu:CheckboxItem>
72+
<twig:DropdownMenu:CheckboxItem>
73+
Panel
74+
</twig:DropdownMenu:CheckboxItem>
75+
<twig:DropdownMenu:CheckboxItem disabled>
76+
Full Screen
77+
</twig:DropdownMenu:CheckboxItem>
78+
</twig:DropdownMenu:Content>
79+
</twig:DropdownMenu>
80+
```
81+
82+
## Radio Group
83+
84+
```twig {"preview":true,"height":"280px"}
85+
<twig:DropdownMenu id="example_radio">
86+
<twig:DropdownMenu:Trigger>
87+
<twig:Button {{ ...trigger_attrs }} variant="outline">Open</twig:Button>
88+
</twig:DropdownMenu:Trigger>
89+
<twig:DropdownMenu:Content class="w-56">
90+
<twig:DropdownMenu:Label>Panel Position</twig:DropdownMenu:Label>
91+
<twig:DropdownMenu:Separator />
92+
<twig:DropdownMenu:RadioGroup value="bottom">
93+
<twig:DropdownMenu:RadioItem value="top">Top</twig:DropdownMenu:RadioItem>
94+
<twig:DropdownMenu:RadioItem value="bottom" checked>Bottom</twig:DropdownMenu:RadioItem>
95+
<twig:DropdownMenu:RadioItem value="right">Right</twig:DropdownMenu:RadioItem>
96+
</twig:DropdownMenu:RadioGroup>
97+
</twig:DropdownMenu:Content>
98+
</twig:DropdownMenu>
99+
```
100+
101+
## Alignment
102+
103+
```twig {"preview":true,"height":"360px"}
104+
<div class="flex justify-between w-full max-w-xl">
105+
<twig:DropdownMenu id="example_align_start" align="start">
106+
<twig:DropdownMenu:Trigger>
107+
<twig:Button {{ ...trigger_attrs }} variant="outline">Start</twig:Button>
108+
</twig:DropdownMenu:Trigger>
109+
<twig:DropdownMenu:Content class="w-40">
110+
<twig:DropdownMenu:Item>
111+
<twig:ux:icon name="lucide:file" class="size-4" />
112+
New File
113+
</twig:DropdownMenu:Item>
114+
<twig:DropdownMenu:Item>
115+
<twig:ux:icon name="lucide:folder" class="size-4" />
116+
New Folder
117+
</twig:DropdownMenu:Item>
118+
</twig:DropdownMenu:Content>
119+
</twig:DropdownMenu>
120+
121+
<twig:DropdownMenu id="example_align_center" align="center">
122+
<twig:DropdownMenu:Trigger>
123+
<twig:Button {{ ...trigger_attrs }} variant="outline">Center</twig:Button>
124+
</twig:DropdownMenu:Trigger>
125+
<twig:DropdownMenu:Content class="w-40">
126+
<twig:DropdownMenu:Item>
127+
<twig:ux:icon name="lucide:file" class="size-4" />
128+
New File
129+
</twig:DropdownMenu:Item>
130+
<twig:DropdownMenu:Item>
131+
<twig:ux:icon name="lucide:folder" class="size-4" />
132+
New Folder
133+
</twig:DropdownMenu:Item>
134+
</twig:DropdownMenu:Content>
135+
</twig:DropdownMenu>
136+
137+
<twig:DropdownMenu id="example_align_end" align="end">
138+
<twig:DropdownMenu:Trigger>
139+
<twig:Button {{ ...trigger_attrs }} variant="outline">End</twig:Button>
140+
</twig:DropdownMenu:Trigger>
141+
<twig:DropdownMenu:Content class="w-40">
142+
<twig:DropdownMenu:Item>
143+
<twig:ux:icon name="lucide:file" class="size-4" />
144+
New File
145+
</twig:DropdownMenu:Item>
146+
<twig:DropdownMenu:Item>
147+
<twig:ux:icon name="lucide:folder" class="size-4" />
148+
New Folder
149+
</twig:DropdownMenu:Item>
150+
</twig:DropdownMenu:Content>
151+
</twig:DropdownMenu>
152+
</div>
153+
```
154+
155+
## With Dialog
156+
157+
```twig {"preview":true,"height":"500px"}
158+
<twig:Dialog id="dropdown_dialog">
159+
<twig:DropdownMenu id="example_dialog">
160+
<twig:DropdownMenu:Trigger>
161+
<twig:Button {{ ...trigger_attrs }} variant="outline">Open</twig:Button>
162+
</twig:DropdownMenu:Trigger>
163+
<twig:DropdownMenu:Content class="w-56">
164+
<twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
165+
<twig:DropdownMenu:Separator />
166+
<twig:DropdownMenu:Group>
167+
<twig:DropdownMenu:Item>
168+
<twig:ux:icon name="lucide:user" class="size-4" />
169+
Profile
170+
<twig:Kbd class="ml-auto">⇧⌘P</twig:Kbd>
171+
</twig:DropdownMenu:Item>
172+
<twig:DropdownMenu:Item>
173+
<twig:ux:icon name="lucide:credit-card" class="size-4" />
174+
Billing
175+
<twig:Kbd class="ml-auto">⌘B</twig:Kbd>
176+
</twig:DropdownMenu:Item>
177+
<twig:DropdownMenu:Item>
178+
<twig:ux:icon name="lucide:settings" class="size-4" />
179+
Settings
180+
<twig:Kbd class="ml-auto">⌘S</twig:Kbd>
181+
</twig:DropdownMenu:Item>
182+
</twig:DropdownMenu:Group>
183+
<twig:DropdownMenu:Separator />
184+
<button
185+
type="button"
186+
role="menuitem"
187+
tabindex="-1"
188+
class="relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
189+
data-dropdown-menu-target="item"
190+
data-action="click->dropdown-menu#close click->dialog#open"
191+
>
192+
<twig:ux:icon name="lucide:user-plus" class="size-4" />
193+
Invite users
194+
</button>
195+
</twig:DropdownMenu:Content>
196+
</twig:DropdownMenu>
197+
<twig:Dialog:Content class="sm:max-w-[425px]">
198+
<twig:Dialog:Header>
199+
<twig:Dialog:Title>Invite team members</twig:Dialog:Title>
200+
<twig:Dialog:Description>
201+
Invite your team members to collaborate.
202+
</twig:Dialog:Description>
203+
</twig:Dialog:Header>
204+
<div class="grid gap-4">
205+
<div class="grid gap-3">
206+
<twig:Label for="email">Email address</twig:Label>
207+
<twig:Input id="email" type="email" placeholder="[email protected]" />
208+
</div>
209+
</div>
210+
<twig:Dialog:Footer>
211+
<twig:Dialog:Close>
212+
<twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
213+
</twig:Dialog:Close>
214+
<twig:Button type="submit">Send invite</twig:Button>
215+
</twig:Dialog:Footer>
216+
</twig:Dialog:Content>
217+
</twig:Dialog>
218+
```
219+

0 commit comments

Comments
 (0)