@dpa-id-components/ui-menu v0.8.0

@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

Events