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:
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+1
-6
@@ -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>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user