Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content.
Fully customizable - supports left/right opening, open on hover/click, interactive mode ...
- This page assumes you’ve already read the Components Basics.Read that first if you are new to components. In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots. It replaces the slot and slot-scope attributes, which are now deprecated, but have not been removed and are still documented here.The rationale for introducing the new syntax is.
- These elements (zero, one, or more) are made available inside that component as a prop called children. React’s children prop is similar to Angular’s transclusion or Vue’s slots. Here’s an example of passing children to a Button component.
- New Vue Composition API overview and comparison with classic Vue Options-based API; Examples to implement a Vue Component with new API: props, data, watchers, lifecycle hooks; Example to take advantage of new Vue 3 Composition API (function-based API): split Topics into Functions; Related Post: Vue v-slot tutorial with examples.
Vue.js simplified: components, props, and slots December 10, 2020 8 min read 2425 In this article, we will be using Vue.js, Vue CLI and Bootstrap CSS. Vue has support for slots built in and it is based on the shadow dom. It is a specification that is still in development but worth taking a look at to learn more about how they work, should this development approach become more common. Angular JS has a similar type of feature of content distribution.
# Installation
or
import to use:
# Example
Vue Watch Props
translate-fade-down.css
# Demo source
# Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Boolean | false | Opens/closes the dropdown. The component uses v-model to control the state of the dropdown. |
| right | Boolean | false | Whether to stick the dropdown on the right side of the element. |
| hover | Boolean | false | If true the menu is open on hover (after hover_time) else it is open on click. |
| closeOnClickOutside | Boolean | true | Should the menu close when clicked outside |
| hover_time | Integer | false | Time before the menu opens in hover model. Default: 100ms |
| transition | String | ' | The vue transition name used to open the menu. |
# Slots
# default
This slot is the element that triggers the dropdown. It can be any HTML element, the components surrounds it with a div which handles the events like hover/click etc.
# dropdown
Vue Slot Examples
This slot is the content of the dropdown menu.