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.

Examples