xxxxxxxxxx1
<template>2
<section class="mb-4">3
<MDBTabs v-model="activeTabId1">4
<!-- Tabs navs -->5
<MDBTabNav tabsClasses="mb-3">6
<MDBTabItem tabId="ex0-1" href="ex0-1">Tab #1</MDBTabItem>7
<MDBTabItem tabId="ex0-2" href="ex0-2">Tab #2</MDBTabItem>8
<MDBTabItem tabId="ex0-3" href="ex0-3">Tab #3</MDBTabItem>9
</MDBTabNav>10
<!-- Tabs navs -->11
<!-- Tabs content -->12
<MDBTabContent>13
<MDBTabPane tabId="ex0-1">Content #1</MDBTabPane>14
<MDBTabPane tabId="ex0-2">15
Content #216
<MDBStepper v-if="showStepper">17
<MDBStepperStep active>18
<MDBStepperHead icon="1"> Step 1 </MDBStepperHead>19
<MDBStepperContent>20
<span>21
Lorem ipsum dolor sit amet, consectetur adipiscing elit,22
sed do eiusmod tempor incididunt ut labore et dolore magna23
aliqua</span24
>25
</MDBStepperContent>26
</MDBStepperStep>27
<MDBStepperStep>28
<MDBStepperHead icon="2"> Step 2 </MDBStepperHead>29
<MDBStepperContent>30
<span>31
Ut enim ad minim veniam, quis nostrud exercitation ullamco32
laboris nisi ut aliquip ex ea commodo consequat</span33
>34
</MDBStepperContent>35
</MDBStepperStep>36
<MDBStepperStep>37
<MDBStepperHead icon="3"> Step 3 </MDBStepperHead>38
<MDBStepperContent>39
<span>40
Duis aute irure dolor in reprehenderit in voluptate velit41
esse cillum dolore eu fugiat nulla pariatur</span42
>43
</MDBStepperContent>44
</MDBStepperStep>45
</MDBStepper>46
</MDBTabPane>47
<MDBTabPane tabId="ex0-3">Content #3</MDBTabPane>48
</MDBTabContent>49
<!-- Tabs content -->50
</MDBTabs>51
</section>52
</template>xxxxxxxxxx1
<style>2
#app {3
font-family: Roboto, Helvetica, Arial, sans-serif;4
}5
</style>xxxxxxxxxx1
<script>2
import { 3
MDBStepper,4
MDBStepperStep,5
MDBStepperHead,6
MDBStepperContent,7
MDBStepperForm,8
MDBTabs,9
MDBTabNav,10
MDBTabContent,11
MDBTabItem,12
MDBTabPane, 13
} from "mdb-vue-ui-kit";14
15
import { ref, watch } from "vue";16
17
export default {18
name: "App",19
components: {20
MDBStepper,21
MDBStepperStep,22
MDBStepperHead,23
MDBStepperContent,24
MDBStepperForm,25
MDBTabs,26
MDBTabNav,27
MDBTabContent,28
MDBTabItem,29
MDBTabPane,30
},31
props: {32
msg: String33
},34
setup() {35
const activeTabId1 = ref("ex0-1");36
37
const showStepper = ref(false);38
39
watch(40
() => activeTabId1.value,41
(val) => {42
if (val === "ex0-2") {43
setTimeout(() => {44
showStepper.value = true;45
}, 100);46
}47
}48
);49
50
return {51
activeTabId1, showStepper52
}53
}54
};55
</script> Console errors: 0