2
0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-22 19:50:33 +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> <div>
<tab-wizard @on-complete="onComplete" <tab-wizard @on-complete="onComplete"
shape="circle" shape="circle"
color="#e74c3c"
class="card"> class="card">
<tab-content title="Personal details" <tab-content title="Personal details"
icon="ti-user"> icon="ti-user">
@@ -16,12 +17,6 @@
Yuhuuu! This seems pretty damn simple Yuhuuu! This seems pretty damn simple
</tab-content> </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> </tab-wizard>
</div> </div>
</template> </template>
+10 -3
View File
@@ -42,7 +42,7 @@
<template> <template>
<span @click="prevTab" v-if="displayPrevButton"> <span @click="prevTab" v-if="displayPrevButton">
<slot name="prev"> <slot name="prev">
<button type="button" class="btn btn-default btn-wd"> <button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle">
{{backButtonText}} {{backButtonText}}
</button> </button>
</slot> </slot>
@@ -52,7 +52,7 @@
<template> <template>
<span @click="finish" class="pull-right" v-if="isLastStep"> <span @click="finish" class="pull-right" v-if="isLastStep">
<slot name="finish"> <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}} {{finishButtonText}}
</button> </button>
</slot> </slot>
@@ -62,7 +62,7 @@
<template> <template>
<span @click="nextTab" class="pull-right" v-if="!isLastStep"> <span @click="nextTab" class="pull-right" v-if="!isLastStep">
<slot name="next"> <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}} {{nextButtonText}}
</button> </button>
</slot> </slot>
@@ -170,6 +170,13 @@
isTabShape () { isTabShape () {
return this.shape === 'tab' return this.shape === 'tab'
}, },
fillButtonStyle () {
return {
backgroundColor: this.color,
borderColor: this.color,
color: 'white'
}
},
progress () { progress () {
let percentage = 0 let percentage = 0
if (this.activeTabIndex > 0) { if (this.activeTabIndex > 0) {