Skip to content

Commit 8dec713

Browse files
SqrczSqrcz
authored
Merge pull request #282 from andreyjamer/dropdown-alignment
feat: Added property to align dropdown context with the trigger
2 parents d85bb4e + a88f982 commit 8dec713

File tree

6 files changed

+296
-25
lines changed

6 files changed

+296
-25
lines changed

‎docs/components/dropdown.md

Lines changed: 135 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup>
22
import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue'
3+
import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue'
34
import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue'
45
import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue'
56
</script>
@@ -22,16 +23,146 @@ The dropdown component can be used to show a list of menu items when clicking on
2223
```vue
2324
<template>
2425
<fwb-dropdown text="Bottom">
25-
<p class="p-2">Dropdown content here</p>
26+
<div class="w-52">
27+
<p class="p-2">
28+
Dropdown content line one
29+
</p>
30+
<p class="p-2">
31+
Dropdown content line two
32+
</p>
33+
<p class="p-2">
34+
Dropdown content line three
35+
</p>
36+
<p class="p-2">
37+
Dropdown content line four
38+
</p>
39+
</div>
2640
</fwb-dropdown>
2741
<fwb-dropdown placement="top" text="Top">
28-
<p class="p-2">Dropdown content here</p>
42+
<div class="w-52">
43+
<p class="p-2">
44+
Dropdown content line one
45+
</p>
46+
<p class="p-2">
47+
Dropdown content line two
48+
</p>
49+
<p class="p-2">
50+
Dropdown content line three
51+
</p>
52+
<p class="p-2">
53+
Dropdown content line four
54+
</p>
55+
</div>
2956
</fwb-dropdown>
3057
<fwb-dropdown placement="right" text="Right">
31-
<p class="p-2">Dropdown content here</p>
58+
<div class="w-52">
59+
<p class="p-2">
60+
Dropdown content line one
61+
</p>
62+
<p class="p-2">
63+
Dropdown content line two
64+
</p>
65+
<p class="p-2">
66+
Dropdown content line three
67+
</p>
68+
<p class="p-2">
69+
Dropdown content line four
70+
</p>
71+
</div>
3272
</fwb-dropdown>
3373
<fwb-dropdown placement="left" text="Left">
34-
<p class="p-2">Dropdown content here</p>
74+
<div class="w-52">
75+
<p class="p-2">
76+
Dropdown content line one
77+
</p>
78+
<p class="p-2">
79+
Dropdown content line two
80+
</p>
81+
<p class="p-2">
82+
Dropdown content line three
83+
</p>
84+
<p class="p-2">
85+
Dropdown content line four
86+
</p>
87+
</div>
88+
</fwb-dropdown>
89+
</template>
90+
91+
<script setup>
92+
import { FwbDropdown } from 'flowbite-vue'
93+
</script>
94+
```
95+
96+
## Dropdown - alignment
97+
98+
The property controls how the dropdown is aligned with the trigger
99+
100+
<fwb-dropdown-example-alignment />
101+
```vue
102+
<template>
103+
<fwb-dropdown text="Bottom" align-to-end>
104+
<div class="w-52">
105+
<p class="p-2">
106+
Dropdown content line one
107+
</p>
108+
<p class="p-2">
109+
Dropdown content line two
110+
</p>
111+
<p class="p-2">
112+
Dropdown content line three
113+
</p>
114+
<p class="p-2">
115+
Dropdown content line four
116+
</p>
117+
</div>
118+
</fwb-dropdown>
119+
<fwb-dropdown placement="top" text="Top" align-to-end>
120+
<div class="w-52">
121+
<p class="p-2">
122+
Dropdown content line one
123+
</p>
124+
<p class="p-2">
125+
Dropdown content line two
126+
</p>
127+
<p class="p-2">
128+
Dropdown content line three
129+
</p>
130+
<p class="p-2">
131+
Dropdown content line four
132+
</p>
133+
</div>
134+
</fwb-dropdown>
135+
<fwb-dropdown placement="right" text="Right" align-to-end>
136+
<div class="w-52">
137+
<p class="p-2">
138+
Dropdown content line one
139+
</p>
140+
<p class="p-2">
141+
Dropdown content line two
142+
</p>
143+
<p class="p-2">
144+
Dropdown content line three
145+
</p>
146+
<p class="p-2">
147+
Dropdown content line four
148+
</p>
149+
</div>
150+
</fwb-dropdown>
151+
<fwb-dropdown placement="left" text="Left" align-to-end>
152+
<div class="w-52">
153+
<p class="p-2">
154+
Dropdown content line one
155+
</p>
156+
<p class="p-2">
157+
Dropdown content line two
158+
</p>
159+
<p class="p-2">
160+
Dropdown content line three
161+
</p>
162+
<p class="p-2">
163+
Dropdown content line four
164+
</p>
165+
</div>
35166
</fwb-dropdown>
36167
</template>
37168

‎docs/components/dropdown/examples/FwbDropdownExampleAlignment.vue

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<div class="vp-raw flex gap-2 flex-wrap">
3+
<fwb-dropdown
4+
placement="top"
5+
text="Top"
6+
align-to-end
7+
>
8+
<div class="w-52">
9+
<p class="p-2">
10+
Dropdown content line one
11+
</p>
12+
<p class="p-2">
13+
Dropdown content line two
14+
</p>
15+
<p class="p-2">
16+
Dropdown content line three
17+
</p>
18+
<p class="p-2">
19+
Dropdown content line four
20+
</p>
21+
</div>
22+
</fwb-dropdown>
23+
<fwb-dropdown
24+
placement="right"
25+
text="Right"
26+
align-to-end
27+
>
28+
<div class="w-52">
29+
<p class="p-2">
30+
Dropdown content line one
31+
</p>
32+
<p class="p-2">
33+
Dropdown content line two
34+
</p>
35+
<p class="p-2">
36+
Dropdown content line three
37+
</p>
38+
<p class="p-2">
39+
Dropdown content line four
40+
</p>
41+
</div>
42+
</fwb-dropdown>
43+
<fwb-dropdown
44+
text="Bottom"
45+
align-to-end
46+
>
47+
<div class="w-52">
48+
<p class="p-2">
49+
Dropdown content line one
50+
</p>
51+
<p class="p-2">
52+
Dropdown content line two
53+
</p>
54+
<p class="p-2">
55+
Dropdown content line three
56+
</p>
57+
<p class="p-2">
58+
Dropdown content line four
59+
</p>
60+
</div>
61+
</fwb-dropdown>
62+
<fwb-dropdown
63+
placement="left"
64+
text="Left"
65+
align-to-end
66+
>
67+
<div class="w-52">
68+
<p class="p-2">
69+
Dropdown content line one
70+
</p>
71+
<p class="p-2">
72+
Dropdown content line two
73+
</p>
74+
<p class="p-2">
75+
Dropdown content line three
76+
</p>
77+
<p class="p-2">
78+
Dropdown content line four
79+
</p>
80+
</div>
81+
</fwb-dropdown>
82+
</div>
83+
</template>
84+
85+
<script setup>
86+
import { FwbDropdown } from '../../../../src/index'
87+
</script>

‎docs/components/dropdown/examples/FwbDropdownExamplePlacement.vue

Lines changed: 56 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,74 @@
44
placement="top"
55
text="Top"
66
>
7-
<p class="p-2">
8-
Dropdown content here
9-
</p>
7+
<div class="w-52">
8+
<p class="p-2">
9+
Dropdown content line one
10+
</p>
11+
<p class="p-2">
12+
Dropdown content line two
13+
</p>
14+
<p class="p-2">
15+
Dropdown content line three
16+
</p>
17+
<p class="p-2">
18+
Dropdown content line four
19+
</p>
20+
</div>
1021
</fwb-dropdown>
1122
<fwb-dropdown
1223
placement="right"
1324
text="Right"
1425
>
15-
<p class="p-2">
16-
Dropdown content here
17-
</p>
26+
<div class="w-52">
27+
<p class="p-2">
28+
Dropdown content line one
29+
</p>
30+
<p class="p-2">
31+
Dropdown content line two
32+
</p>
33+
<p class="p-2">
34+
Dropdown content line three
35+
</p>
36+
<p class="p-2">
37+
Dropdown content line four
38+
</p>
39+
</div>
1840
</fwb-dropdown>
1941
<fwb-dropdown text="Bottom">
20-
<p class="p-2">
21-
Dropdown content here
22-
</p>
42+
<div class="w-52">
43+
<p class="p-2">
44+
Dropdown content line one
45+
</p>
46+
<p class="p-2">
47+
Dropdown content line two
48+
</p>
49+
<p class="p-2">
50+
Dropdown content line three
51+
</p>
52+
<p class="p-2">
53+
Dropdown content line four
54+
</p>
55+
</div>
2356
</fwb-dropdown>
2457
<fwb-dropdown
2558
placement="left"
2659
text="Left"
2760
>
28-
<p class="p-2">
29-
Dropdown content here
30-
</p>
61+
<div class="w-52">
62+
<p class="p-2">
63+
Dropdown content line one
64+
</p>
65+
<p class="p-2">
66+
Dropdown content line two
67+
</p>
68+
<p class="p-2">
69+
Dropdown content line three
70+
</p>
71+
<p class="p-2">
72+
Dropdown content line four
73+
</p>
74+
</div>
3175
</fwb-dropdown>
3276
</div>
3377
</template>

‎src/components/FwbDropdown/FwbDropdown.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,15 @@ const props = withDefaults(
6262
placement?: DropdownPlacement
6363
text?: string
6464
transition?: string
65-
closeInside: boolean
65+
closeInside?: boolean
66+
alignToEnd?: boolean
6667
}>(),
6768
{
6869
placement: 'bottom',
6970
text: '',
7071
transition: '',
7172
closeInside: false,
73+
alignToEnd: false,
7274
},
7375
)
7476
@@ -89,6 +91,7 @@ const wrapper = ref<HTMLDivElement>()
8991
9092
const { contentClasses, contentStyles } = useDropdownClasses({
9193
placement: toRef(props, 'placement'),
94+
alignToEnd: toRef(props, 'alignToEnd'),
9295
visible,
9396
contentRef: content,
9497
})

0 commit comments

Comments
 (0)