Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit cbeabe1

Browse filesBrowse files
mrholekmrholek
committed
feat(CDropdown): add centered dropdown and centered dropup
1 parent 1f5543e commit cbeabe1
Copy full SHA for cbeabe1

File tree

3 files changed

+81
-4
lines changed
Filter options

3 files changed

+81
-4
lines changed

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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/dropdown/CDropdown.ts
+18-3Lines changed: 18 additions & 3 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/api/dropdown/CDropdown.api.md
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: packages/docs/components/dropdown.md
+62Lines changed: 62 additions & 0 deletions
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.