2
0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-06 00:22:23 +03:00

Adjust button styling to match overall wizard style

This commit is contained in:
cristijora
2017-04-17 22:42:09 +03:00
parent 6b93aa433c
commit d0c3d63f24
3 changed files with 12 additions and 10 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -6
View File
@@ -2,6 +2,7 @@
<div>
<tab-wizard @on-complete="onComplete"
shape="circle"
color="#e74c3c"
class="card">
<tab-content title="Personal details"
icon="ti-user">
@@ -16,12 +17,6 @@
Yuhuuu! This seems pretty damn simple
</tab-content>
<button slot="prev" class="btn btn-default">
Go back
</button>
<button slot="next" class="btn btn-default">
Go to next step
</button>
</tab-wizard>
</div>
</template>
+10 -3
View File
@@ -42,7 +42,7 @@
<template>
<span @click="prevTab" v-if="displayPrevButton">
<slot name="prev">
<button type="button" class="btn btn-default btn-wd">
<button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle">
{{backButtonText}}
</button>
</slot>
@@ -52,7 +52,7 @@
<template>
<span @click="finish" class="pull-right" v-if="isLastStep">
<slot name="finish">
<button type="button" class="btn btn-fill btn-wd btn-next">
<button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle">
{{finishButtonText}}
</button>
</slot>
@@ -62,7 +62,7 @@
<template>
<span @click="nextTab" class="pull-right" v-if="!isLastStep">
<slot name="next">
<button type="button" class="btn btn-fill btn-wd btn-next">
<button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle">
{{nextButtonText}}
</button>
</slot>
@@ -170,6 +170,13 @@
isTabShape () {
return this.shape === 'tab'
},
fillButtonStyle () {
return {
backgroundColor: this.color,
borderColor: this.color,
color: 'white'
}
},
progress () {
let percentage = 0
if (this.activeTabIndex > 0) {