Open PostmansCat opened 2 years ago
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?
<!-- 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>
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: