Topic: Hot to add other html code in tabs content?
Hello everyone, i started to doing my first project om MDB on vue technology and I have one problem. How can i put other content (cards code for example) in tabs content. So when you switch between tabs you switch between different cards.
I've tried to put code straight to :content category between ` symbols, but it gives me errors because of " " in code of a card.
Before MDB i've used material vue and the code there was kinda easier to paste other html code in tabs:
<md-tabs md-sync-route class="tabs" md-alignment="centered">
<!-- TAB WITH CARDS -->
<md-tab id="tab-home" md-label="Home" to="/components/tabs/home">
<!-- My html code goes there -->
</md-tab>
<!-- TAB WITH WORKERS CARDS -->
<md-tab id="tab-pages" md-label="Workers" to="/components/tabs/pages">
<!-- My html code goes there -->
</md-tab>
</md-tabs>
Magdalena Dembna staff premium answered 6 years ago
Hi, I've noticed a typo in you code - the prefix should be 'mdb-'. Unfortunately, free version of tabs is meant for displaying text. For our pro users we provide the following solution:
<template>
<mdb-container class="m-5">
<mdb-tab tabs color="primary" justify>
<mdb-tab-item icon="user" :active="pillsActive==0" @click.native.prevent="pillsActive=0">Card1</mdb-tab-item>
<mdb-tab-item icon="heart" :active="pillsActive==1" @click.native.prevent="pillsActive=1">Card2</mdb-tab-item>
</mdb-tab>
<mdb-tab-content>
<mdb-tab-pane class="fade" key="show1" v-if="pillsActive==0">
<mdb-card>
<mdb-card-image src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="Card image cap"></mdb-card-image>
<mdb-card-body>
<mdb-card-title>Basic card</mdb-card-title>
<mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
<mdb-btn color="primary">Button</mdb-btn>
</mdb-card-body>
</mdb-card>
</mdb-tab-pane>
<mdb-tab-pane class="fade" key="show2" v-if="pillsActive==1">
<mdb-card>
<mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%286%29.jpg" alt="Card image cap"></mdb-card-image>
<mdb-card-body>
<mdb-card-title>Basic card</mdb-card-title>
<mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
<mdb-btn color="primary">Button</mdb-btn>
</mdb-card-body>
</mdb-card>
</mdb-tab-pane>
</mdb-tab-content>
</mdb-container>
</template>
<script>
import { mdbTab, mdbTabItem, mdbTabContent, mdbTabPane, mdbContainer, mdbIcon, mdbTabs, mdbCard, mdbCardBody, mdbCardText, mdbCardTitle, mdbBtn, mdbCardImage } from 'mdbvue';
export default {
name: 'HelloWorld',
components: {
mdbTab,
mdbTabItem,
mdbTabContent,
mdbTabPane,
mdbContainer,
mdbIcon,
mdbTabs,
mdbCard,
mdbCardText,
mdbCardBody,
mdbCardTitle,
mdbBtn,
mdbCardImage
},
data() {
return {
pillsActive: 0,
verticalWithin: 0
};
}
}
</script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.1
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No