@dpa-id-components/ui-menu
UiMenu
Vue 2.x dropdown menu component based on the dpa Design Kit
Installation
yarn add @dpa-id-components/ui-menu
Usage
<!-- SomeComponent.vue using UiMenu -->
<template>
<ui-menu @option-select="handleEvent">
<span slot="label">Sortieren nach:</span>
<span slot="selectedOption">Neueste zuerst</span>
<ui-list slot="menu">
<ui-list-item selected :value="{ direction: 'desc', field: 'version_created' }">Neueste zuerst</ui-list-item>
<ui-list-item :value="{ direction: 'asc', field: 'version_created' }">Älteste zuerst</ui-list-item>
<ui-list-item :value="{ direction: 'desc', field: 'popularity' }">Meistgeladen</ui-list-item>
<ui-list-item :value="{ direction: 'asc', field: 'duration' }">Kürzeste zuerst</ui-list-item>
<ui-list-item :value="{ direction: 'desc', field: 'duration' }">Längste zuerst</ui-list-item>
</ui-list>
</ui-menu>
</template>
<script>
import UiMenu from "@dpa-id-components/ui-menu";
import UiList from "@dpa-id-components/ui-list";
import UiListItem from "@dpa-id-components/ui-list-item";
export default {
components: {
UiMenu,
UiList,
UiListItem,
},
methods: {
handleEvent: console.log,
},
};
</script>
Demo
View a demo of <ui-menu>
on Storybook
API
Slots
Name | Description |
---|---|
activator |
Optional slot for a button activator to open the menu |
label |
Optional slot for the label on the activator |
selectedOption |
Optional slot for indicated the selected option |
menu |
Slot for the menu's UiList
|
Events
Name | Type | Description |
---|---|---|
close |
Emitted when the menu is closed | |
open |
Emitted when the menu is opened | |
option-select |
MenuOption |
Emitted with the selected MenuOption as payload when an option is selected |