@dpa-id-components/ui-dropdown
UiDropdown
Vue 2.x dropdown menu component based on the dpa Design Kit
Installation
yarn add @dpa-id-components/ui-dropdown
Usage
<!-- SomeComponent.vue using UiDropdown -->
<template>
<ui-dropdown @item-checked="handleEvent" @checked-all="handleEvent" v-bind="$props" />
</template>
<script>
import UiDropdown from "@dpa-id-components/ui-dropdown";
export default {
components: {
UiDropdown,
},
props: {
overlayHeadline: "Ressorts wählen",
submitButton: "Auswählen",
cancelButton: "Abbrechen",
value: [
{
name: "alle Ressorts",
isChecked: false,
},
{
name: "Wirtschaft",
isChecked: false,
},
],
},
methods: {
handleEvent: console.log,
},
};
</script>
Demo
View a demo of <ui-dropdown>
on Storybook
API
Props
The "CheckboxItem"-Type is used. Consisting of "name", "isChecked" and "iconName"
Name | Type | Default | Description |
---|---|---|---|
value |
CheckboxItem |
`` | Adds the value to the checkbox, consiting of name, isChecked and iconName ("CheckboxItem"-Type) |
submitButton |
String |
Auswählen |
Adds the submit button label to the mobile overlay |
cancelButton |
String |
Abbrechen |
Adds the cancel button label to the mobile overlay |
overlayHeadline |
String |
`` | Adds headline to the mobile overlay |
Events
Name | Type | Description |
---|---|---|
checked-all |
Emitted when all items are selected | |
item-checked |
Emitted when each individual item is checked |