tabs function
This commit is contained in:
parent
3bf8872a33
commit
2db63db8db
1 changed files with 11 additions and 5 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue