Dropdown Multi

This component can be used to select one or multiple items in a list or group.

This component depends on third-party component library for Vue 3:

• Component (dropdown) from PrimeVue
• CSS from PrimeIcons and PrimeFlex

Example Usage

Example

Fächer0 / 7

Fächer

Ausgewähltes Fach:

Beispiel auf anderem Hintergrund

Fächer

[]

<template>
  <div>
    <SkDropdownMulti
      v-model="selectedSubject"
      :options="subjects"
      option-label="label"
      option-value="value"
      placeholder="Fächer"
      class="mr-s mb-l"
    >
      <template #emptyfilter>
        <SkButton class="w-full" type="tertiary" icon="plus">Thema anlegen</SkButton>
      </template>
    </SkDropdownMulti>
    <br />
    <SkDropdownMulti
      v-model="selectedSubject"
      :options="subject2"
      :detailed="true"
      option-label="label"
      option-value="value"
      placeholder="Fächer"
      class="mr-s mb-s"
    />
  </div>
  <div>Ausgewähltes Fach: {{ selectedSubject }}</div>

  <div class="bg-background p-l">
    <p>Beispiel auf anderem Hintergrund</p>
    <SkDropdownMulti
      v-model="selectedSubject3"
      :options="subject3"
      :detailed="true"
      option-label="label"
      option-value="value"
      option-group-label="label"
      option-group-children="items"
      placeholder="Fächer"
      class="mr-s mb-s"
    />
    {{ selectedSubject3 }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const selectedSubject = ref();
const selectedSubject3 = ref([]);

const subjects = ref([
  {
    label: 'Mathematik ist ein tolles Fach Mathematik',
    value: 'Mathe',
  },
  { label: 'Deutsch', value: 'DE' },
  { label: 'Biologie', value: 'BIO' },
  { label: 'Chemie', value: 'CH' },
  { label: 'Deutsch2', value: 'DE2' },
  { label: 'Biologie2', value: 'BIO2' },
  { label: 'Chemie2', value: 'CH2' },
]);

const subject2 = ref([
  {
    label: 'Mathematik ist ein tolles Fach Mathematik',
    value: 'Mathe',
  },
  { label: 'Indisch', value: 'IND' },
  { label: 'Englisch', value: 'ENG' },
  { label: 'Französisch', value: 'FRA' },
]);

const subject3 = ref([
  {
    label: 'Mathematik ist ein tolles Fach Mathematik',
    items: [
      { label: 'Deutsch', value: 'DE' },
      { label: 'Biologie', value: 'BIO' },
      { label: 'Chemie', value: 'CH' },
      { label: 'Deutsch2', value: 'DE' },
      { label: 'Biologie2', value: 'BIO' },
      { label: 'Chemie2', value: 'CH2' },
    ],
  },
]);
</script>

Reference

This component can be extended with all options from PrimeVue

Properties

Name	Type	Default	Description
v-model	Array	[]	The final choosen options
detailed	Boolean	false	Show the selected elements inside the input or not
indicator	string	undefined	Sets a new symbol for the dropdown based on the icon library

Events

Name	Parameters	Description
click	$event	do something
update:modelValue	$event	triggered whenever the input changes