50 lines
2.0 KiB
Vue
50 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="flex items-center relative">
|
||
|
|
<!-- v-bind:class="{ 'text-white bg-teal-600 border-teal-600': isCurrent, 'border-teal-600': isChecked }" -->
|
||
|
|
<div
|
||
|
|
class="text-gray-500 rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2"
|
||
|
|
:class="[
|
||
|
|
isCurrent ? 'text-white bg-teal-600 border-teal-600' : 'border-gray-300',
|
||
|
|
isChecked && 'text-teal-600 border-teal-600',
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<!-- <svg class="my-svg-component" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||
|
|
<path
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z"
|
||
|
|
/>
|
||
|
|
</svg> -->
|
||
|
|
<slot></slot>
|
||
|
|
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase invisible sm:visible">
|
||
|
|
{{ label }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="!isLastStep"
|
||
|
|
class="flex-auto border-t-2 transition duration-500 ease-in-out invisible sm:visible"
|
||
|
|
:class="[isChecked ? 'border-teal-600' : 'border-gray-300']"
|
||
|
|
></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Icon_Multistep',
|
||
|
|
|
||
|
|
props: {
|
||
|
|
isCurrent: Boolean,
|
||
|
|
isChecked: Boolean,
|
||
|
|
isLastStep: Boolean,
|
||
|
|
label: String,
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
mode: 'light',
|
||
|
|
checkedClass: 'border-teal-600',
|
||
|
|
uncheckedClass: 'border-gray-300',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|