Vigour

# Tabs 标签页

# Example

import { tabs, tabsHead, tabsItem, tabsBody, tabsPane } from 'vigour';
// tabs.name === 'vigour-tabs'
// tabsHead.name === 'vigour-tabs-head'
// tabsItem.name === 'vigour-tabs-item'
// tabsBody.name === 'vigour-tabs-body'
// tabsPane.name === 'vigour-tabs-pane'

# Basic

tab 1
tab 2
tab 3
<vigour-tabs :selected.sync="tab" direction="horizontal">
  <vigour-tabs-head>
    <vigour-tabs-item name="tab1">tab 1</vigour-tabs-item>
    <vigour-tabs-item name="tab2">tab 2</vigour-tabs-item>
    <vigour-tabs-item name="tab3" disabled>tab 3</vigour-tabs-item>
  </vigour-tabs-head>
  <vigour-tabs-body>
    <vigour-tabs-pane name="tab1">tab 1 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab2">tab 2 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab3">tab 3 content</vigour-tabs-pane>
  </vigour-tabs-body>
</vigour-tabs>

# Slots

You can use v-slot:actions to add extra content to the Tabs bar. I added a button in the following example.

你可以使用 v-slot:actions 来 Tabs 栏增加额外的内容，在以下例子中我添加了一个按钮。

tab 1
tab 2
tab 3
<vigour-tabs :selected.sync="tab" direction="horizontal">
  <vigour-tabs-head>
    <template v-slot:actions>
      <vigour-button>test</vigour-button>
    </template>
    <vigour-tabs-item name="tab1">tab 1</vigour-tabs-item>
    <vigour-tabs-item name="tab2">tab 2</vigour-tabs-item>
    <vigour-tabs-item name="tab3" disabled>tab 3</vigour-tabs-item>
  </vigour-tabs-head>
  <vigour-tabs-body>
    <vigour-tabs-pane name="tab1">tab 1 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab2">tab 2 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab3">tab 3 content</vigour-tabs-pane>
  </vigour-tabs-body>
</vigour-tabs>

# Directions

You can use the direction attribute to specify whether the Tabs is displayed horizontally or vertically. By default, the value of direction is 'horizontal'.

你可以使用 direction 属性来指定 Tabs 是水平还是垂直展示。默认情况下，direction 的值是 'horizontal'。

tab 1
tab 2
tab 3
<vigour-tabs :selected.sync="tab" direction="vertical">
  <vigour-tabs-head>
    <vigour-tabs-item name="tab1">tab 1</vigour-tabs-item>
    <vigour-tabs-item name="tab2">tab 2</vigour-tabs-item>
    <vigour-tabs-item name="tab3" disabled>tab 3</vigour-tabs-item>
  </vigour-tabs-head>
  <vigour-tabs-body>
    <vigour-tabs-pane name="tab1">tab 1 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab2">tab 2 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab3">tab 3 content</vigour-tabs-pane>
  </vigour-tabs-body>
</vigour-tabs>
tab 1
tab 2
tab 3
<vigour-tabs :selected.sync="tab" direction="vertical">
  <vigour-tabs-head>
    <template v-slot:actions>
      <vigour-button>Button</vigour-button>
    </template>
    <vigour-tabs-item name="tab1">tab 1</vigour-tabs-item>
    <vigour-tabs-item name="tab2">tab 2</vigour-tabs-item>
    <vigour-tabs-item name="tab3" disabled>tab 3</vigour-tabs-item>
  </vigour-tabs-head>
  <vigour-tabs-body>
    <vigour-tabs-pane name="tab1">tab 1 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab2">tab 2 content</vigour-tabs-pane>
    <vigour-tabs-pane name="tab3">tab 3 content</vigour-tabs-pane>
  </vigour-tabs-body>
</vigour-tabs>

# Props

# Tabs

prop type default value available value
selected.sync string - -
direction string - 'horizontal', 'vertical'

← Popover →