1.0.3 • Published 5 months ago
@appsbd/vue3-elite-wizard v1.0.3
A vue3 widget plugin
Usage
You can install it using npm install @appsbd/vue3-elite-wizard --save
Code Sample
<EliteWizard header-class="p-2" @close="onClose" class="mb-3"
:before-prev="beforePrevCheck"
:before-next="beforeNextCheck"
:before-finish="beforeFinish"
@finished="finished">
<EliteWizardContent title="Step 1">Test 1</EliteWizardContent>
<EliteWizardContent icon="t" title="Step 2">Test 2 </EliteWizardContent>
<EliteWizardContent title="Step 3">Test 3</EliteWizardContent>
<EliteWizardContent title="Step 4">Test 4</EliteWizardContent>
</EliteWizard>
Composition API Method
<script setup>
import EliteWizard from "@appsbd/vue3-elite-wizard";
import {EliteWizardContent} from "@appsbd/vue3-elite-wizard";
const onClose =() =>{
console.log("Closed called");
}
const beforeNextCheck =async (params) =>{
// It will call before next content,
// You can be valid your content here.
return true;
};
const beforePrevCheck =async (params) =>{
// It will call before previous content.
// You can be valid your content here.
return true;
};
const beforeFinish =async (params) =>{
// It will called before finish.
// You can be valid your content here.
return true;
};
const finished =async (params) =>{
//it will call on finish
return true;
};
</script>
Option API Method
import EliteWizard from "@appsbd/vue3-elite-wizard";
import {EliteWizardContent} from "@appsbd/vue3-elite-wizard";
export default {
components: {EliteWizard,EliteWizardContent},
methods:{
onClose(){
console.log("Closed called");
},
async beforeNextCheck(params) {
// It will called before next content,
// You can be valid your content here.
return true;
},
async beforePrevCheck(params){
// It will call before previous content.
// You can be valid your content here.
return true;
},
async beforeFinish(params){
// It will call before finish.
// You can be valid your content here.
return true;
},
async finished(){
//it will call on finish
return true;
},
}
}
css Variable
.apbd-ew-panel {
--ew-base-color: #69b546;
--ew-base-inactive-color: #ccc;
--ew-circle-size: 60px;
--ew-circle-complete-color: var(--ew-base-color);
--ew-circle-inactive-color: var(--ew-base-inactive-color);
--ew-step-border-width: 4px;
--ew-btn-border-radius: 5px;
--ew-btn-padding: 0.35rem 0.775rem;
--ew-btn-bg: var(--ew-base-inactive-color);
--ew-btn-bg-success: var(--ew-base-color);
}
See the website for full API documentation.