@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 |