Skip to content

Commit b8651c4

Browse files
tho-danSqrcz
tho-dan
and
Sqrcz
authored
Add support for grouping dropdowns and buttons together in button group (#331)
* feat: add support for grouping dropdowns and buttons together in button group * feat: add documentation section for grouping buttons and dropdowns together * chore: simplify button group with dropdown example * chore: fix code style --------- Co-authored-by: Sqrcz <naorniakowski@slashlab.pl>
1 parent 39aa0e0 commit b8651c4

File tree

4 files changed

+82
-1
lines changed

4 files changed

+82
-1
lines changed

‎docs/components/button-group.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup>
22
import FwbButtonGroupExample from './buttonGroup/examples/FwbButtonGroupExample.vue'
33
import FwbButtonGroupExampleIcon from './buttonGroup/examples/FwbButtonGroupExampleIcon.vue'
4+
import FwbButtonGroupExampleDropdown from './buttonGroup/examples/FwbButtonGroupExampleDropdown.vue'
45
</script>
56

67
# Vue Button Group - Flowbite
@@ -57,3 +58,44 @@ import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
5758
import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
5859
</script>
5960
```
61+
62+
## Grouping buttons and dropdowns
63+
64+
You can also mix buttons with dropdowns inside the button group.
65+
<fwb-button-group-example-dropdown />
66+
```vue
67+
<template>
68+
<fwb-button-group>
69+
<fwb-button>Button 1</fwb-button>
70+
<fwb-button>Button 2</fwb-button>
71+
<fwb-dropdown text="Dropdown">
72+
<p class="p-2">
73+
This is a test dropdown
74+
</p>
75+
</fwb-dropdown>
76+
<fwb-dropdown text="Dropdown with list">
77+
<fwb-list-group>
78+
<fwb-list-group-item hover>
79+
<a href="#">These</a>
80+
</fwb-list-group-item>
81+
<fwb-list-group-item hover>
82+
<a href="#">are</a>
83+
</fwb-list-group-item>
84+
<fwb-list-group-item hover>
85+
<a href="#">some</a>
86+
</fwb-list-group-item>
87+
<fwb-list-group-item hover>
88+
<a href="#">list</a>
89+
</fwb-list-group-item>
90+
<fwb-list-group-item hover>
91+
<a href="#">items</a>
92+
</fwb-list-group-item>
93+
</fwb-list-group>
94+
</fwb-dropdown>
95+
</fwb-button-group>
96+
</template>
97+
98+
<script setup>
99+
import { FwbButtonGroup, FwbButton, FwbDropdown, FwbListGroupItem, FwbListGroup } from 'flowbite-vue'
100+
</script>
101+
```

‎docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="vp-raw">
3+
<fwb-button-group>
4+
<fwb-button>Button 1</fwb-button>
5+
<fwb-button>Button 2</fwb-button>
6+
<fwb-dropdown text="Dropdown">
7+
<p class="p-2">
8+
This is a test dropdown
9+
</p>
10+
</fwb-dropdown>
11+
<fwb-dropdown text="Dropdown with list">
12+
<fwb-list-group>
13+
<fwb-list-group-item hover>
14+
<a href="#">These</a>
15+
</fwb-list-group-item>
16+
<fwb-list-group-item hover>
17+
<a href="#">are</a>
18+
</fwb-list-group-item>
19+
<fwb-list-group-item hover>
20+
<a href="#">some</a>
21+
</fwb-list-group-item>
22+
<fwb-list-group-item hover>
23+
<a href="#">list</a>
24+
</fwb-list-group-item>
25+
<fwb-list-group-item hover>
26+
<a href="#">items</a>
27+
</fwb-list-group-item>
28+
</fwb-list-group>
29+
</fwb-dropdown>
30+
</fwb-button-group>
31+
</div>
32+
</template>
33+
34+
<script setup>
35+
import { FwbButton, FwbButtonGroup, FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
36+
</script>

‎src/components/FwbButtonGroup/FwbButtonGroup.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,17 @@
99

1010
<style>
1111
.fwb-button-group > button,
12+
.fwb-button-group > .fwb-dropdown button,
1213
.fwb-button-group > .fwb-tooltip button {
1314
@apply rounded-none;
1415
}
1516
.fwb-button-group > button:first-child,
17+
.fwb-button-group > .fwb-dropdown:first-child button,
1618
.fwb-button-group > .fwb-tooltip:first-child button {
1719
@apply rounded-l-lg;
1820
}
1921
.fwb-button-group > button:last-child,
22+
.fwb-button-group > .fwb-dropdown:last-child button,
2023
.fwb-button-group > .fwb-tooltip:last-child button {
2124
@apply rounded-r-lg;
2225
}

‎src/components/FwbDropdown/FwbDropdown.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
ref="wrapper"
4-
class="inline-flex relative"
4+
class="fwb-dropdown inline-flex relative"
55
>
66
<div class="inline-flex items-center">
77
<fwb-slot-listener @click="onToggle">

0 commit comments

Comments
 (0)