@dpa-id-components/ui-checkboxgroup
v0.5.0
Published
UiCheckBoxGroup vue component with dpa Design Kit
Downloads
11
Maintainers
Keywords
Readme
@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 |