# Tabs

If you have information that you don't need to show at once, we suggest you use tabs. We carefully re-styled the custom tabs component from vuematerial.io which you can easily use.

In order to use the tabs, import the necessary components:

import {NavTabsCard} from 'src/components'

# Global Usage 

Vue.component(NavTabsCard)

# For Local Usage 

export default {
  components: {
    NavTabsCard
  }
}



<div class="md-layout">
  <div class="md-layout-item md-size-100">
    <nav-tabs-card no-label>
      <template slot="content">
        <md-tabs md-sync-route class="md-primary" md-alignment="left">

          <md-tab id="tab-home" md-label="Profile" md-icon="face">
            <p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
          </md-tab>

          <md-tab id="tab-pages" md-label="Messages" md-icon="chat">
            <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
          </md-tab>

          <md-tab id="tab-posts" md-label="Settings" md-icon="build">
            <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
          </md-tab>
        </md-tabs>
      </template>
    </nav-tabs-card>
  </div>
</div>
<script>
import {
  NavTabsCard
} from '@/components'

export default{
  components: {
    NavTabsCard
  },
  data () {
    return {
      selected: [],
      firstTabs: [
        { tab: 'Sign contract for "What are conference organizers afraid of?"' },
        { tab: 'Lines From Great Russian Literature? Or E-mails From My Boss?' },
        { tab: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit' }
      ],
      secondTabs: [
        { tab: 'Sign contract for "What are conference organizers afraid of?"' },
        { tab: 'Lines From Great Russian Literature? Or E-mails From My Boss?' },
        { tab: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit' }
      ],
      thirdTabs: [
        { tab: 'Sign contract for "What are conference organizers afraid of?"' },
        { tab: 'Lines From Great Russian Literature? Or E-mails From My Boss?' },
        { tab: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit' }
      ]
    }
  }

}
</script>
Name Description
content Default card content

Note: for more details about the tabs that can you use please see the Tabs section from vuematerial.io

In order to use the nav pills, import the necessary components: 

import {Tabs} from 'src/components'

# Global Usage 

Vue.component(Tabs)

# For Local Usage 

export default {
  components: {
    Tabs
  }
}


# Example Pills



# Horizontal Tabs

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. 

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-100 md-small-size-100">
      <tabs
        :tab-active="1"
        :tab-name="['Profile', 'Settings', 'Options']"
        plain
        color-button="rose">

        <!-- here you can add your content for tab-content -->
        <template slot="tab-pane-1">
          Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
          <br><br>
          Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
        </template>
        <template slot="tab-pane-2">
          Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
          <br><br>
          Dramatically maintain clicks-and-mortar solutions without functional solutions.
        </template>
        <template slot="tab-pane-3">
          Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
          <br><br>
          Dynamically innovate resource-leveling customer service for state of the art customer service.
        </template>
      </tabs>
    </div>
  </div>
</template>

<script>
import { Tabs } from "@/components";

export default {
  components: {
    Tabs
  }
};
</script>

# Vertical Tabs

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions. 

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-100 md-small-size-100">
      <tabs
        :tab-active="2"
        :tab-name="['Profile', 'Settings', 'Options']"
        flex-column
        plain
        color-button="rose">
        <!-- here you can add your content for tab-content -->
        <template slot="tab-pane-1">
          Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
          <br><br>
          Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
        </template>
        <template slot="tab-pane-2">
          Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
          <br><br>
          Dramatically maintain clicks-and-mortar solutions without functional solutions.
        </template>
        <template slot="tab-pane-3">
          Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
          <br><br>
          Dynamically innovate resource-leveling customer service for state of the art customer service.
        </template>
      </tabs>
    </div>
  </div>
</template>

<script>
import { Tabs } from "@/components";

export default {
  components: {
    Tabs
  }
};
</script>

← Switch →