skoutz-relaunch/src/pages/statische-fieberkurven.vue

127 lines
2.4 KiB
Vue

<template>
<div>
<!-- Statische Fieberkurve -->
<div>
<hr>
<br>
<h2>Statische Fieberkurve</h2>
<p>1.
< Fieberkurve
:isStatic="true"
:defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" />
</p>
<p>2.
< Fieberkurve :isStatic="true"
:hideText="true"
:defaultValues="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]" />
</p>
<hr>
<br>
<Fieberkurve
:is-static="true"
:default-values="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]"
/>
<Fieberkurve
:is-static="true"
:hide-text="true"
:default-values="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]"
/>
</div>
</div>
</template>
<script setup>
import { ref } from "vue"
import Fieberkurve from "@/components/Fieberkurve.vue"
</script>
<style scoped>
h1 {
text-align: center;
margin-bottom: 20px;
}
h2 {
margin: 20px 0;
text-align: left;
}
.button-container {
text-align: center;
margin: 20px 0;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
div {
margin-bottom: 40px;
}
</style>
<!--
<script setup>
import Fieberkurve from "@/components/Fieberkurve.vue";
</script>
<template>
<VCard
title="Fieberkurven Vorschauseite"
subtitle="Hier werden nur ein paar Varianten der Fieberkurve gezeigt!"
>
<h4>Interaktive Fieberkurve:</h4>
&lt;!&ndash; Interaktive Fieberkurve &ndash;&gt;
<Fieberkurve :isStatic="false" />
<br>
<br>
<Fieberkurve :isStatic="false" />
<br>
<hr>
<br>
<h4>Statische Fieberkurve mit vordefinierten Werten:</h4>
&lt;!&ndash; Statische Fieberkurve mit vordefinierten Werten &ndash;&gt;
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
<br>
<br>
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 2 }, { value: 2 }, { value: 3 }, { value: 1 }]" />
<br>
<br>
<Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 7 }]" />
<br>
<br>
</VCard>
</template>
<style scoped lang="scss">
</style>
-->