Dropdown

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

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

Example Usage

Example

Für welches Fach?

Welcher Lehrer?

Welcher Lehrer?

Beispiel auf farbigen Grund

Welcher Lehrer?

Inline Dropdowns

Welcher Lehrer?

Ausgewähltes Fach:

<template>
  <div>
    <SkDropdown
      v-model="selectedSubject"
      :options="subjects"
      option-label="label"
      option-value="value"
      placeholder="Für welches Fach?"
      class="mr-s mb-s"
      filter
      filter-placeholder="Suchen..."
    >
      <template #emptyfilter>
        <SkButton class="w-full" type="tertiary" icon="plus">Thema anlegen</SkButton>
      </template>
    </SkDropdown>

    <SkDropdown
      v-model="selectedSubject2"
      :options="subjects2"
      option-label="label"
      option-value="value"
      placeholder="Welcher Lehrer?"
      class="mr-s mb-s"
    />

    <SkDropdown
      v-model="selectedSubject2"
      :options="subjects2"
      :loading="true"
      option-label="label"
      option-value="value"
      placeholder="Welcher Lehrer?"
      class="mr-s mb-s"
    />

    <div class="bg-background p-l">
      <p>Beispiel auf farbigen Grund</p>
      <SkDropdown
        v-model="selectedSubject2"
        :options="subjects2"
        option-label="label"
        option-value="value"
        placeholder="Welcher Lehrer?"
        class="mr-s mb-s"
      />
    </div>

    <p>Inline Dropdowns</p>
    <h2>
      <SkDropdownInline
        v-model="selectedSubject2"
        :options="subjects2"
        option-label="label"
        option-value="value"
        placeholder="Welcher Lehrer?"
        class="mr-s mb-s"
      />
    </h2>
  </div>
  <div>Ausgewähltes Fach: {{ selectedSubject }}</div>
</template>

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

const selectedSubject = ref();
const selectedSubject2 = ref();

const subjects = ref([
  { label: 'Mathematik', value: 'Mathematik' },
  { label: 'Deutsch', value: 'Deutsch' },
  { label: 'Biologie', value: 'Biologie' },
  { label: 'Chemie', value: 'Chemie' },
  { label: 'Indisch', value: 'Indisch' },
  { label: 'Englisch', value: 'Englisch' },
  { label: 'Französisch', value: 'Französisch' },
]);

const subjects2 = ref([
  { label: 'Lehrer 1', value: '1' },
  { label: 'Lehrer 2', value: '2' },
]);
</script>

Reference

This component can be extended with all options from PrimeVue

Properties

Name	Type	Default	Description
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 |