# Tabs

If you have information that you don't need to show at once, we suggest you use tabs. The first option for tabs is the plain text tabs and the second also contains icons. We carefully crafted a custom tabs component which you can easily use

In order to use the tabs, import the necessary components 
import {Tabs, TabPane} from 'src/components'
1

Global usage

// plugin import
Vue.component(Tabs)
Vue.component(TabPane)
1
2
3

For local usage

export default {
  components: {
    Tabs,
    TabPane
  }
}
1
2
3
4
5
6

# 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.

<template>
  <tabs type="primary">
    <tab-pane label="Profile">
      <p>{{tabText.p11}}</p>
      <p>{{tabText.p12}}</p>
    </tab-pane>
    <tab-pane label="Settings">
      <p>{{tabText.p21}}</p>
      <p>{{tabText.p22}}</p>
    </tab-pane>
    <tab-pane label="Options">
      <p>{{tabText.p31}}</p>
      <p>{{tabText.p32}}</p>
    </tab-pane>
  </tabs>
</template>

<script>
  export default {
    data() {
      return {
        tabText: {
          p11: "...",
          p12: "...",
          p21: "...",
          p22: "...",
          p31: "...",
          p32: "...",
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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.

<template>
  <tabs type="primary" vertical class="row">
    <tab-pane label="Profile">
      <p>{{tabText.p11}}</p>
      <p>{{tabText.p12}}</p>
    </tab-pane>
    <tab-pane label="Settings">
      <p>{{tabText.p21}}</p>
      <p>{{tabText.p22}}</p>
    </tab-pane>
    <tab-pane label="Options">
      <p>{{tabText.p31}}</p>
      <p>{{tabText.p32}}</p>
    </tab-pane>
  </tabs>
</template>

<script>
  export default {
    data() {
      return {
        tabText: {
          p11: "...",
          p12: "...",
          p21: "...",
          p22: "...",
          p31: "...",
          p32: "...",
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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.

<template>
<tabs type="primary" tabNavWrapperClasses="col-md-4" tabContentClasses="col-md-8"
      vertical square class="row">
  <tab-pane>
    <span slot="label">
      <i class="now-ui-icons objects_umbrella-13"></i>Home
    </span>
    <p>{{tabText.p11}}</p>
    <p>{{tabText.p12}}</p>
  </tab-pane>

  <tab-pane>
    <span slot="label">
    <i class="now-ui-icons ui-2_settings-90"></i>Settings
    </span>
        <p>{{tabText.p21}}</p>
        <p>{{tabText.p22}}</p>
  </tab-pane>
</tabs>
</template>

<script>
  export default {
    data() {
      return {
        tabText: {
          p11: "...",
          p12: "...",
          p21: "...",
          p22: "...",
          p31: "...",
          p32: "...",
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Tabs as page subcategories

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.

<template>
  <tabs type="primary" tabContentClasses="tab-subcategories"
        square centered class="row">
    <tab-pane>
    <span slot="label">
      <i class="now-ui-icons objects_umbrella-13"></i>Home
    </span>
      <p>{{tabText.p11}}</p>
      <p>{{tabText.p12}}</p>
    </tab-pane>
    <tab-pane>
    <span slot="label">
      <i class="now-ui-icons shopping_shop"></i>Messages
    </span>
      <p>{{tabText.p21}}</p>
      <p>{{tabText.p22}}</p>
    </tab-pane>
    <tab-pane>
    <span slot="label">
      <i class="now-ui-icons ui-2_settings-90"></i>Settings
    </span>
      <p>{{tabText.p31}}</p>
      <p>{{tabText.p32}}</p>
    </tab-pane>
  </tabs>
</template>

<script>
  export default {
    data() {
      return {
        tabText: {
          p11: "...",
          p12: "...",
          p21: "...",
          p22: "...",
          p31: "...",
          p32: "...",
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# Control with v-model

:::tip Tabs v-model will link each label of each tab-pane. Make sure you specify the label prop even if you use label slots to make v-model work. :::

Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.

Dynamically innovate resource-leveling customer service for state of the art customer service.

<template>
  <tabs type="primary" vertical class="row" v-model="activeTab">
    <tab-pane label="Profile">
      <p>{{tabText.p11}}</p>
      <p>{{tabText.p12}}</p>
    </tab-pane>
    <tab-pane label="Settings">
      <p>{{tabText.p21}}</p>
      <p>{{tabText.p22}}</p>
    </tab-pane>
    <tab-pane label="Options">
      <p>{{tabText.p31}}</p>
      <p>{{tabText.p32}}</p>
    </tab-pane>
  </tabs>
</template>

<script>
  export default {
    data() {
      return {
        activeTab: 'Options',
        tabText: {
          p11: "...",
          p12: "...",
          p21: "...",
          p22: "...",
          p31: "...",
          p32: "...",
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# Different types (colors)

PRIMARY

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.

INFO

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.

DANGER

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.

SUCCESS

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.

WARNING

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.

DEFAULT

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.

<template>
  <div>
    <div v-for="type in tabTypes" :key="type">
      <h3>{{type.toUpperCase()}}</h3>
      <tabs :type="type" vertical class="row">
        <tab-pane label="Profile">
          <p>{{tabText.p11}}</p>
          <p>{{tabText.p12}}</p>
        </tab-pane>
        <tab-pane label="Settings">
          <p>{{tabText.p21}}</p>
          <p>{{tabText.p22}}</p>
        </tab-pane>
        <tab-pane label="Options">
          <p>{{tabText.p31}}</p>
          <p>{{tabText.p32}}</p>
        </tab-pane>
      </tabs>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabTypes: ['primary', 'info', 'danger', 'success', 'warning', 'default'],
        tabText: {
          p11: "...",
          p12: "...",
          p21: "...",
          p22: "...",
          p31: "...",
          p32: "...",
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# Tabs Props

Prop Name Type Default Description
type String default
activeTab String N/A
tabNavWrapperClasses String | Object N/A
tabNavClasses String | Object N/A
tabContentClasses String | Object N/A
vertical Boolean N/A
noContentSpace Boolean N/A
icons Boolean N/A
centered Boolean N/A
value String N/A
pills Boolean N/A

# Tabs Slots

Name Description
default Default content for tabs

# Tab Pane Props

Prop Name Type Default Description
label String N/A
id String N/A
disabled Boolean N/A

# Tab Pane Slots

Name Description
default Default tab pane content
label This slot will be not displayed in the tab-pane but in the corresponding upper clickable tab

← Typography →