Jörn-Michael Miehe
5c865b8dbb
- update browserslist - make BulmaBreadcrumbs clearer - fix aspect ratio on SVGRect - fix weird behaviour on DoorCanvas click
33 lines
761 B
Vue
33 lines
761 B
Vue
<!-- eslint-disable vue/multi-word-component-names -->
|
|
<template>
|
|
<nav class="breadcrumb has-succeeds-separator">
|
|
<ul>
|
|
<li
|
|
v-for="(step, index) in steps"
|
|
:key="index"
|
|
:class="model === index ? 'is-active' : ''"
|
|
@click.left="model = index"
|
|
>
|
|
<a :class="model === index ? 'has-text-primary' : ''">
|
|
<span class="icon is-small">
|
|
<FontAwesomeIcon :icon="step.icon" />
|
|
</span>
|
|
<span>{{ step.label }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
export interface BCStep {
|
|
label: string;
|
|
icon: string | string[];
|
|
}
|
|
|
|
const model = defineModel<number>({ required: true });
|
|
|
|
defineProps<{
|
|
steps: BCStep[];
|
|
}>();
|
|
</script>
|