Hot to add other html code in tabs content?

Topic: Hot to add other html code in tabs content?

Darwin97 free asked 5 years ago

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>

Add comment

Magdalena Dembna staff answered 5 years ago

0 0 Best answer

<p>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: </p>

<pre class="prettyprint"><code><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>
</code></pre>

Please insert min. 20 characters.

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>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

Darwin97

5Support score
1Questions 0Answers 0Snippets