Dropdown
Overview
The VDropdown
component provides a flexible way to create dropdown menus that can display a list of items. It can be configured to toggle visibility based on hover or click events, making it suitable for various use cases in user interfaces.
Basic
To use the Dropdown component, import it into your Vue file:
import VDropdown from 'UiKit/components/VDropdown/VDropdown.vue';
Example
Here’s a simple example of how to implement the Dropdown component:
<VDropdown>
<template #default>
Select an option
</template>
<template #listItem>
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
</template>
</VDropdown>
Props
defineProps({
hover: {
type: Boolean,
default: false,
},
});
hover
: (Optional) A boolean that determines if the dropdown should be displayed on hover. If set to true, the dropdown will open when the user hovers over it.
Slots
The Dropdown component supports two slots:
Default Slot
: This slot is for the selected item display. You can use it to show the currently selected item or a placeholder.
<template #default>
Select an option
</template>
listItem Slot
: This slot is for rendering the dropdown items. You can define the content for each item here.
<template #listItem>
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
</template>
Complete Example
Here’s a complete example showing how to use the Dropdown component with props and slots:
<script setup lang="ts">
import VDropdown from 'UiKit/components/VDropdown/VDropdown.vue';
const selectedOption = ref('Select an option');
</script>
<template>
<VDropdown :hover="false">
<template #default>
{{ selectedOption }}
</template>
<template #listItem>
<div @click="selectedOption = 'Option 1'">Option 1</div>
<div @click="selectedOption = 'Option 2'">Option 2</div>
<div @click="selectedOption = 'Option 3'">Option 3</div>
</template>
</VDropdown>
</template>
Click Behavior
When the dropdown is clicked (and hover
is false), it toggles the visibility of the dropdown items. The dropdown items will close if a user clicks outside of the dropdown area, thanks to the onClickOutside
directive.
Hover Behavior
If the hover
prop is set to true
, the dropdown will display the items on hover instead of click.