Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-12-24 13:33:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

steps with icons

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-01-20 00:42:47 +00:00
parent 63f5b3fe19
commit c0bc9aee5d
1 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ui/src/components/DoorMapEditor.vue
View file

@ -10,13 +10,19 @@
:class="current_step === index ? 'is-active' : ''"
@click="current_step = index"
>
<a>{{ step }}</a>
<a>
<span class="icon is-small">
<font-awesome-icon :icon="step.icon" />
</span>
<span>{{ step.label }}</span>
</a>
</li>
</ul>
</nav>
<DoorPlacer v-if="current_step === 0" />
<p v-if="current_step === 1">Narf!</p>
<p v-if="current_step === 1">Foo</p>
<p v-if="current_step === 2">Bar</p>
</div>
</template>
@ -24,13 +30,26 @@
import { Vue, Options } from "vue-class-component";
import DoorPlacer from "./door_map/DoorPlacer.vue";
type Step = {
label: string;
icon: string;
};
@Options({
components: {
DoorPlacer,
},
})
export default class DoorMapEditor extends Vue {
private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
private readonly steps: Step[] = [
{ label: "Platzieren", icon: "fa-solid fa-crosshairs" },
{ label: "Ordnen", icon: "fa-solid fa-list-ol" },
{ label: "Überprüfen", icon: "fa-solid fa-check" },
];
private current_step = 0;
private change_step(next_step: number) {
this.current_step = next_step;
}
}
</script>