@dpa-id-components/dpa-expanded-search

DpaEventItem Vue 2.x domain sepecific for Events (i.e. detail search in dpa-Agenda) component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/dpa-expanded-search

Usage

<!-- SomeComponent.vue using DpaExpandedSearch -->
<template>
  <dpa-expanded-search>
    <template #content>
      <UiInputDialogGroup label="Enthält alle diese Wörter" placeholder="Beispiel: Bearbock, Mercedes" />
    </template>
    <template #actions>
      <ui-button color="white">Abbrechen</ui-button>
      <ui-button :rounded="true">Suchen</ui-button>
    </template>
  </dpa-expanded-search>
</template>

<script>
  export default {}
</script>

Demo

View a demo of <dpa-expanded-search> on Storybook

API

Slots

| Name | Description | | ------------------- |------------------------------------------------------------------------------| | actions | slot for a ui-menu activator button for further actions (e.g. copy, share) | | content | slot for search input fields. UiInputDialogGroup is highly recommended |