SkCard

Example Usage

Example

Aufgabe

Deutsch

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatibus, quidem, quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos natus. Quisquam voluptatibus, quidem, quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos natus.

Aufgabe

Deutsch

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatibus, quidem, quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos natus. Quisquam voluptatibus, quidem, quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos natus.

<template>
  <SkCard class="mb-l">
    <template #header>
      <h4>
        <span>Aufgabe</span>
        <SkDropdownInline
          v-model="type"
          option-label="label"
          option-value="value"
          :options="subjects"
        />
      </h4>
    </template>
    <template #header-right>
      <SkIcon name="close" fill="orange" />
    </template>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatibus, quidem,
      quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos natus. Quisquam
      voluptatibus, quidem, quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos
      natus.
    </p>
  </SkCard>

  <SkCard :clickable="true">
    <template #header>
      <h4>
        <span>Aufgabe</span>
        <SkDropdownInline
          v-model="type"
          option-label="label"
          option-value="value"
          :options="subjects"
        />
      </h4>
    </template>
    <template #header-right>
      <SkIcon name="close" fill="orange" />
    </template>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatibus, quidem,
      quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos natus. Quisquam
      voluptatibus, quidem, quibusdam, voluptatem voluptatum quod dolorum voluptates quae quia quos
      natus.
    </p>
  </SkCard>
</template>
<script setup>
import { ref } from 'vue';

const type = ref('Deutsch');
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' },
]);
</script>

Properties

Slots

Name	Description
default	The main content of the card
header	The (left) header of the card
header-right	The right header of the card. Use it to add buttons and actions to the card.

Events