0.8.0 • Published 2 years ago
@dpa-id-components/ui-searchinputgroup v0.8.0
@dpa-id-components/ui-searchinputgroup
UiSearchInputGroup
Vue 2.x input component based on the dpa Design Kit
Installation
yarn add @dpa-id-components/ui-searchinputgroup
## Usage
```html
<!-- DpaExpandedSearch.vue using UiSearchInputGroup -->
<template>
<DpaExpandedSearch>
<template #content>
<UiSearchInputGroup :label="label" :placeholder="placeholder"
:is-checkbox="isCheckbox" :checkboxes="checkboxes" :first-entry-checks-all="true"
:is-dropdown="isDropdown" :dropdown-entries="dropdown"
:has-add-entry-option="addEntryOption" />
</template>
</DpaExpandedSearch>
</template>
<script>
import DpaExpandedSearch from "@dpa-id-components/dpa-expandedsearch";
import UiInputDialogGroup from "@dpa-id-components/ui-inputdialoggroup";
export default {
components: {
DpaExpandedSearch,
UiInputDialogGroup,
},
props: {
label: "Enthält alle diese Wörter",
placeholder: "Beispiel: Baerbock, Mercedes",
isCheckbox: false,
addEntryOption: true,
checkboxes: [
{
name: "Alle Inhalte",
isChecked: false,
},
{
name: "Top Einträge",
isChecked: false,
iconName: "audio-inline",
},
{
name: "Termine",
isChecked: false,
},
],
isDropdown: false,
dropdown: [
{
name: "alle Regionen",
isChecked: false,
},
{
name: "Nord",
isChecked: false,
},
{
name: "Süd",
isChecked: false,
},
{
name: "Ost",
isChecked: false,
},
{
name: "West",
isChecked: false,
},
],
}
};
</script>
Demo
View a demo of <ui-searchinputgroup>
on Storybook
API
Props
The "CheckboxItem"-Type is used. Consisting of "name", "isChecked" and "iconName"
Name | Type | Default | Description |
---|---|---|---|
label | String | "default label" | Sets the label to the input element |
tooltip | String | "default tooltip" | Sets the tooltip-text |
placeholder | String | "default placeholder" | Sets the placeholder in the input field |
placeholder | String | "default placeholder" | Sets the placeholder in the input field |
dropdownOverlayHeadline | String | "default headline" | Sets the headline inside the dropdown mobile |
checkboxes | Array as CheckboxItem[] | | Sets the chekbox elements if a checkboxmenu is selected | |
dropdownEntries | Array as CheckboxItem[] | | Sets the chekbox elements if a dropdownmenu is selected |
Events
Name | Type | Description |
---|---|---|
input | Array | When input fields receive user input |