Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 08:13:01 +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' : ''" :class="current_step === index ? 'is-active' : ''"
@click="current_step = index" @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> </li>
</ul> </ul>
</nav> </nav>
<DoorPlacer v-if="current_step === 0" /> <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> </div>
</template> </template>
@ -24,13 +30,26 @@
import { Vue, Options } from "vue-class-component"; import { Vue, Options } from "vue-class-component";
import DoorPlacer from "./door_map/DoorPlacer.vue"; import DoorPlacer from "./door_map/DoorPlacer.vue";
type Step = {
label: string;
icon: string;
};
@Options({ @Options({
components: { components: {
DoorPlacer, DoorPlacer,
}, },
}) })
export default class DoorMapEditor extends Vue { 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 current_step = 0;
private change_step(next_step: number) {
this.current_step = next_step;
}
} }
</script> </script>