@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