0.5.0 • Published 2 years ago
@dpa-id-components/ui-checkboxgroup v0.5.0
@dpa-id-components/ui-checkboxgroup
UiCheckBoxGroup
Vue 2.x menu component based on the dpa Design Kit
Installation
yarn add @dpa-id-components/ui-checkboxgroup
Usage
<template>
<UiCheckBoxGroup :value="checkboxes" :first-entry-checks-all="true" @item-checked="handleEvent"
@checked-all="handleEvent" />
</template>
<script>
import UiCheckBoxGroup from "@dpa-id-components/ui-checkboxgroup";
export default {
components: {
UiCheckBoxGroup,
}
props: {
checkboxes: [
{
name: "alle Ressorts",
isChecked: false,
},
{
name: "Wirtschaft",
isChecked: false,
iconName: "audio-inline",
},
],
}
methods: {
handleEvent: console.log,
},
};
</script>
Demo
View a demo of <ui-checkboxgroup>
on Storybook
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) | |
firstEntryChecksAll | Boolean | false | Wether the first item checks all the boxes |
Events
Name | Type | Description |
---|---|---|
checked-all | Emitted when all items are selected | |
item-checked | Emitted when each individual item is checked |