Custom Header Buttons
PostmansCat opened this issue · 0 comments
PostmansCat commented
ISSUE
I am trying to have the wizard controls from the footer above in the header as well. Anyone have an idea how I could achieve this?
End result wanted:
<!-- Header Actions -->
<template slot="header" slot-scope="props">
<div class="wizard-header-left">
<wizard-button v-if="props.activeTabIndex > 0 && !props.isLastStep" @click.native="props.prevTab()" :style="props.fillButtonStyle">Previous</wizard-button>
</div>
<div class="wizard-header-right">
<wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-header-right" :style="props.fillButtonStyle">Next</wizard-button>
<wizard-button v-else @click.native="alert('Done')" class="wizard-header-right finish-button" :style="props.fillButtonStyle"> {{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
</div>
</template>
<!-- Tabs -->
<tab-content title="Personal details">
My first tab content
</tab-content>]
<!-- Footer Actions -->
<template slot="footer" slot-scope="props">
<div class="wizard-footer-left">
<wizard-button v-if="props.activeTabIndex > 0 && !props.isLastStep" @click.native="props.prevTab()" :style="props.fillButtonStyle">Previous</wizard-button>
</div>
<div class="wizard-footer-right">
<wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
<wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle"> {{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
</div>
</template>