tabs function

This commit is contained in:
Jörn-Michael Miehe 2023-01-19 17:54:46 +00:00
parent 3bf8872a33
commit 2db63db8db

View file

@ -4,13 +4,18 @@
<div class="tabs is-centered"> <div class="tabs is-centered">
<ul> <ul>
<li class="is-active"><a>Platzieren</a></li> <li
<li><a>Ordnen</a></li> v-for="(step, index) in steps"
<li><a>Überprüfen</a></li> :key="'step-' + index"
:class="current_step === index ? 'is-active' : ''"
@click="current_step = index"
>
<a>{{ step }}</a>
</li>
</ul> </ul>
</div> </div>
<section v-if="step === 0"> <section v-if="current_step === 0">
<div class="content"> <div class="content">
<ul> <ul>
<li>Linksklick + Ziehen: Neues Türchen erstellen</li> <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
@ -36,7 +41,8 @@ import RectPad from "./rects/RectPad.vue";
}, },
}) })
export default class CalendarImage extends Vue { export default class CalendarImage extends Vue {
private step = 0; private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
private current_step = 0;
} }
</script> </script>