Skip to content

Instantly share code, notes, and snippets.

@faforty faforty/tp-head-step
Created Jan 12, 2017

Embed
What would you like to do?
<template>
<router-link tag="div" :to="link" class="tp-head-step">
<ui-progress-bar :animate="{ progress: progress }" :size="size" :style="{margin: '0 auto 20px'}">
<div class="tp-head-step__info">
<span>{{ currentStep }}/{{ maxSteps }}</span>
</div>
</ui-progress-bar>
<div :class="['tp-head-step__left-link', {'tp-head-step__left-link--active': isActive, 'tp-head-step__left-link--disabled': !isActive ? isDisabled : false }]">Продукт<br> и поставка</div>
</router-link>
</template>
<style>
.tp-head-step {
display: inline-flex;
flex-direction: row;
margin-right: 70px;
}
.tp-head-step__info {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: inherit;
height: inherit;
cursor: pointer;
font-size: 12px;
}
.tp-head-step__left-link {
margin-left: 20px;
text-transform: uppercase;
line-height: 18px;
letter-spacing: 0.6px;
font-size: 12px;
color: #2d9e6e;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
}
.tp-head-step__left-link--active {
color: #000;
}
.tp-head-step__left-link--disabled {
cursor: default;
color: #8d8d8d;
}
</style>
<script>
export default {
props: {
size: {
type: String,
default: '40px'
},
progress: {
type: Number,
default: 0
},
maxSteps: {
type: Number,
default: 0
},
currentStep: {
type: Number,
default: 0
},
isActive: Boolean,
isDisabled: {
type: Boolean,
default: true
},
link: {
type: String,
default: ''
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.