0.6.0 • Published 2 years ago
@dpa-id-components/ui-dropdown v0.6.0
@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 |