Skip to content

Commit cbeabe1

Browse files
mrholekmrholek
committed
feat(CDropdown): add centered dropdown and centered dropup
1 parent 1f5543e commit cbeabe1

File tree

3 files changed

+81
-4
lines changed

3 files changed

+81
-4
lines changed

‎packages/coreui-vue/src/components/dropdown/CDropdown.ts

+18-3
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,14 @@ const CDropdown = defineComponent({
6464
/**
6565
* Sets a specified direction and location of the dropdown menu.
6666
*
67-
* @values 'dropup', 'dropend', 'dropstart'
67+
* @values 'center', 'dropup', 'dropup-center', 'dropend', 'dropstart'
6868
*/
6969
direction: {
7070
type: String,
7171
default: undefined,
7272
required: false,
7373
validator: (value: string) => {
74-
return ['dropup', 'dropend', 'dropstart'].includes(value)
74+
return ['center', 'dropup', 'dropup-center', 'dropend', 'dropstart'].includes(value)
7575
},
7676
},
7777
/**
@@ -164,15 +164,26 @@ const CDropdown = defineComponent({
164164
provide('dropdownToggleRef', dropdownToggleRef)
165165
provide('dropdownMenuRef', dropdownMenuRef)
166166

167+
if (props.direction === 'center') {
168+
placement.value = 'bottom'
169+
}
170+
167171
if (props.direction === 'dropup') {
168172
placement.value = 'top-start'
169173
}
174+
175+
if (props.direction === 'dropup-center') {
176+
placement.value = 'top'
177+
}
178+
170179
if (props.direction === 'dropend') {
171180
placement.value = 'right-start'
172181
}
182+
173183
if (props.direction === 'dropstart') {
174184
placement.value = 'left-start'
175185
}
186+
176187
if (props.alignment === 'end') {
177188
placement.value = 'bottom-end'
178189
}
@@ -240,7 +251,11 @@ const CDropdown = defineComponent({
240251
{
241252
class: [
242253
props.variant === 'nav-item' ? 'nav-item dropdown' : props.variant,
243-
props.direction,
254+
props.direction === 'center'
255+
? 'dropdown-center'
256+
: props.direction === 'dropup-center'
257+
? 'dropup dropup-center'
258+
: props.direction,
244259
],
245260
},
246261
slots.default && slots.default(),

‎packages/docs/api/dropdown/CDropdown.api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
1313
| **alignment** | Set aligment of dropdown menu. | string\|object | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - |
1414
| **auto-close** | Configure the auto close behavior of the dropdown:<br>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | - | true |
1515
| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | |
16-
| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'dropup'`, `'dropend'`, `'dropstart'` | - |
16+
| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - |
1717
| **disabled** | Toggle the disabled state for the component. | boolean | - | |
1818
| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' |
1919
| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true |

‎packages/docs/components/dropdown.md

+62
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,39 @@ And putting it to use in a navbar:
299299
</p>
300300
</CCallout>
301301

302+
### Centered
303+
304+
Make the dropdown menu centered below the toggle by adding `direction="center"` to the `<CDropdown>` component.
305+
306+
::: demo
307+
<CDropdown color="secondary" direction="center">
308+
<CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
309+
<CDropdownMenu>
310+
<CDropdownItem href="#">Action</CDropdownItem>
311+
<CDropdownItem href="#">Another action</CDropdownItem>
312+
<CDropdownItem href="#">Something else here</CDropdownItem>
313+
<CDropdownDivider/>
314+
<CDropdownItem href="#">Separated link</CDropdownItem>
315+
</CDropdownMenu>
316+
</CDropdown>
317+
:::
318+
```vue
319+
<CDropdown color="secondary" direction="center">
320+
<CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
321+
<CDropdownMenu>
322+
<CDropdownItem href="#">Action</CDropdownItem>
323+
<CDropdownItem href="#">Another action</CDropdownItem>
324+
<CDropdownItem href="#">Something else here</CDropdownItem>
325+
<CDropdownDivider/>
326+
<CDropdownItem href="#">Separated link</CDropdownItem>
327+
</CDropdownMenu>
328+
</CDropdown>
329+
```
330+
331+
### Dropup
332+
333+
Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CDropdown>` component.
334+
302335
::: demo
303336
<CDropdown color="secondary" direction="dropup">
304337
<CDropdownToggle color="secondary">Dropup</CDropdownToggle>
@@ -346,6 +379,35 @@ And putting it to use in a navbar:
346379
</CDropdown>
347380
```
348381

382+
### Dropup centered
383+
384+
Make the dropup menu centered above the toggle by adding `direction="dropup-center"` to the `<CDropdown>` component.
385+
386+
::: demo
387+
<CDropdown color="secondary" direction="dropup-center">
388+
<CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
389+
<CDropdownMenu>
390+
<CDropdownItem href="#">Action</CDropdownItem>
391+
<CDropdownItem href="#">Another action</CDropdownItem>
392+
<CDropdownItem href="#">Something else here</CDropdownItem>
393+
<CDropdownDivider/>
394+
<CDropdownItem href="#">Separated link</CDropdownItem>
395+
</CDropdownMenu>
396+
</CDropdown>
397+
:::
398+
```vue
399+
<CDropdown color="secondary" direction="dropup-center">
400+
<CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
401+
<CDropdownMenu>
402+
<CDropdownItem href="#">Action</CDropdownItem>
403+
<CDropdownItem href="#">Another action</CDropdownItem>
404+
<CDropdownItem href="#">Something else here</CDropdownItem>
405+
<CDropdownDivider/>
406+
<CDropdownItem href="#">Separated link</CDropdownItem>
407+
</CDropdownMenu>
408+
</CDropdown>
409+
```
410+
349411
### Dropright
350412

351413
Trigger dropdown menus at the right of the elements by adding `direction="dropend"` to the `<CDropdown>` component.

0 commit comments

Comments
 (0)