Tabs Tab

The Tabs component needs to be used with the Tab component.

Example

Size variants

Available ui size values: s / m / l.

<template>
<article>
  <veui-tabs
    ui="l"
    :active.sync="active"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs :active.sync="active">
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs
    ui="s"
    :active.sync="active"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers'
    }
  }
}
</script>

Style variants

Use ui set to borderless / simple / strong to respectively enable the default style of no divider style, simple style, and enhanced style.

Borderless style

Simple style

Strong style

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Borderless style</h4>
    <veui-tabs ui="borderless">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
    </veui-tabs>
  </section>
  <section>
    <h4>Simple style</h4>
    <veui-tabs ui="simple">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
    </veui-tabs>
  </section>
  <section>
    <h4>Strong style</h4>
    <veui-tabs ui="strong">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Router mode

Set the to property of the Tab component to use the router mode.

Tab content #1

Edit this demo on GitHubEdit

<template>
<article>
  <veui-tabs :active="$route.fullPath">
    <veui-tab
      label="Tab 1"
      to="/components/tabs/tab"
    />
    <veui-tab
      label="Tab 2"
      to="/components/tabs/tab2"
    />
    <veui-tab
      label="Tab 3 (custom panel slot)"
      to="/components/tabs/tab3"
    >
      <h3>Tab Header</h3>
      <router-view/>
      <footer>Tab footer</footer>
    </veui-tab>
    <veui-tab
      label="Redirect to Form"
      to="/components/form"
    />
    <template #panel>
      <router-view/>
    </template>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers',
      index: 0
    }
  }
}
</script>

Data source

In addition to using the Tab component, you can also set the items property to set the data source for the tab.

默认1

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-tabs :items="tabs">
      <template
        #panel="{ activeTab }"
      >
        <p>{{ activeTab.label }}</p>
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs
  },
  data () {
    return {
      tabs: [
        { label: '默认1', name: '默认1' },
        { label: '默认2', name: '默认2' },
        { label: '默认3', name: '默认3' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Add and remove

Use the addable property to show the add button.

Add the removable property to the Tab component or add the removable field to the items property of Tabs to make a single tab removable.

Tab 1

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-tabs
      ref="tabs"
      addable
      :items="realTabs"
      :active.sync="active"
      @add="addTab"
      @remove="removeTab"
    >
      <template #panel="{ activeTab }">
        <p>{{ activeTab.label }}</p>
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs } from 'veui'
import { findIndex } from 'lodash'

export default {
  components: {
    'veui-tabs': Tabs
  },
  data () {
    return {
      tabs: [
        { label: 'Tab 1', name: 't1' },
        { label: 'Tab 2', name: 't2' },
        { label: 'Tab 3', name: 't3' }
      ],
      active: 't1',
      count: 3
    }
  },
  computed: {
    realTabs () {
      let { tabs } = this
      return tabs.length === 1
        ? [{ ...tabs[0], removable: false }]
        : tabs.map(tab => ({ ...tab, removable: true }))
    }
  },
  methods: {
    addTab () {
      this.count++

      let name = `t${this.count}`

      this.tabs.push({
        label: `Tab ${this.count}`,
        name
      })

      this.active = name
    },
    removeTab ({ name }) {
      let index = findIndex(this.tabs, tab => tab.name === name)

      if (index !== -1) {
        this.tabs.splice(index, 1)
        this.active = (this.tabs[index - 1] || this.tabs[0]).name
      }
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Tab status

Set the status property of the Tab component to add status to the tab.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-tabs>
    <veui-tab
      label="Address 1"
      status="success"
    />
    <veui-tab
      label="Address 2"
      status="info"
    />
    <veui-tab
      label="Address 3"
      status="warning"
    />
    <veui-tab
      label="Address 4"
      status="error"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Sortable

Set the sortable property to enable tab sorting, recommended to be used together with the items property.

Tab 1

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-tabs
      sortable
      :items="tabs"
      @sort="handleSort"
    >
      <template #panel="{ activeTab }">
        <p>{{ activeTab.label }}</p>
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs
  },
  data () {
    return {
      tabs: [
        { label: 'Tab 1', name: 't1' },
        { label: 'Tab 2', name: 't2' },
        { label: 'Tab 3', name: 't3' }
      ]
    }
  },
  methods: {
    handleSort (fromIndex, toIndex) {
      const item = this.tabs[fromIndex]
      this.tabs.splice(fromIndex, 1)
      this.tabs.splice(toIndex, 0, item)
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Disabled state

Set the disabled property of the Tab component to disable the tab.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-tabs>
    <veui-tab label="Tab 1">
      <p>This is Tab 1</p>
    </veui-tab>
    <veui-tab
      label="Tab 2"
      disabled
    >
      <p>This is Tab 2</p>
    </veui-tab>
    <veui-tab label="Tab 3">
      <p>This is Tab 3</p>
    </veui-tab>
    <veui-tab label="Tab 4">
      <p>This is Tab 4</p>
    </veui-tab>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  }
}
</script>

Custom tab

Set tab-item and tab-label slot content, or the item and label slot of the Tab component to customize the tab content.

Customizing tab item

Customizing tab label

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Customizing tab item</h4>
    <veui-tabs ui="borderless">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
      <template #tab-item="{ label, attrs, activate, index, active }">
        <button
          v-bind="attrs"
          :style="{
            fontWeight: active ? '600' : '400',
            textDecoration: active ? 'underline' : 'none'
          }"
          @click="activate"
        >
          #{{ index + 1 }} {{ label }}
        </button>
      </template>
    </veui-tabs>
  </section>
  <section>
    <h4>Customizing tab label</h4>
    <veui-tabs>
      <veui-tab label="Tab 1">
        <template #label="{ label, active }">
          <veui-icon :name="active ? 'envelope-open' : 'envelope'"/> {{ label }}
        </template>
      </veui-tab>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
      <template #tab-label="{ label, active }">
        <veui-icon :name="active ? 'folder-open' : 'folder'"/> {{ label }}
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs, Tab, Icon } from 'veui'
import 'veui-theme-dls-icons/envelope'
import 'veui-theme-dls-icons/envelope-open'
import 'veui-theme-dls-icons/folder'
import 'veui-theme-dls-icons/folder-open'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab,
    'veui-icon': Icon
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Extra content

Set the extra slot content to provide additional content for the tab row.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-tabs>
    <veui-tab label="Tab 1"/>
    <veui-tab label="Tab 2"/>
    <veui-tab label="Tab 3"/>
    <template #extra>
      <veui-message status="aux">
        This is an extra message.
      </veui-message>
    </template>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab, Message } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab,
    'veui-message': Message
  }
}
</script>

API

Props

Name Type Default Description

ui

string

The preset styles.

Value	Description
`s`	Small size style.
`m`	Medium size style.
`l`	Large size style.
`borderless`	Style without bottom separator.
`simple`	Simple style.
`strong`	Strong style.

items

Array<Object>

[]

The data source of tabs, the item type is { label, name, disabled, status, removable, to, native ... }.

Name	Type	Description
`label`	`string`	The title of the tab.
`name`	`string`	The name of the tab.
`status`	`'success' \| 'warning' \| 'info' \| 'error'`	The status of the tab.
`disabled`	`boolean`	Whether the tab is disabled.
`removable`	`boolean`	Whether the tab can be removed.
`to`	`string \| Object`	-
`native`	`boolean`	`false`

active

string

.sync

Indicates which tab is currently active. The specific mapping value is affected by the properties of the tab, with priority given to to > name.

matches

function(Route, Route): boolean

tabs.matches

Used to set a unified routing matching logic for the internal Tab component. Refer to the to prop of the Tab component for details.

When the internal Tab component sets the matches prop, it will override the matches prop on the Tabs component.

addable boolean false Whether to allow adding tabs.

max number - The maximum number of tabs that can be added.

tip string - The tooltip text.

add-label string - The text content of the "Add" button.

eager boolean false Whether to render the content of all non-active tab panels immediately (and hide them).

sortable boolean false Whether the tab items can be dragged to sort, it is recommended to use with the items property.

Slots

Name Description

default Allows inline Tab components. No default content.

panel The panel area below the tab.

extra The extension area on the right side of the tab.

tab-item

The tab area, with the button/link corresponding to the tab as the default content. The slot parameter is an object describing the tab properties.

Name	Type	Description
`label`	`string`	The text of the tab.
`name`	`string`	The name of the tab.
`disabled`	`boolean`	Whether the tab is disabled.
`to`	`string`	The routing information of the tab.
`active`	`boolean`	Whether the tab is the active item.
`index`	`number`	The index value of the tab in the list.
`native`	`boolean`	Whether to force the routing mode to use the native `<a>` element.
`removable`	`boolean`	Whether the tab can be removed.
`status`	`string`	The status of the tab.
`attrs`	`Object<string, string>`	Other HTML attributes that need to be output to the tab element, such as `role` / `aria-selected` / `aria-controls`, etc.
`activate`	`function(): void`	The method to activate the current tab.

tab-label The text area of the tab, with the tab text as the default content. The slot parameters are the same as those of the tab-item slot, except for attrs / activate.

Events

Name	Description
`change`	Triggered when the tab is switched. The callback parameter is `(tab: Object)`, where `tab` is consistent with the slot parameter in `tab-label`.
`add`	Triggered when the add button is clicked. No callback parameters.
`remove`	Triggered when a tab is removed. The callback parameter is `(tab: Object)`, where `tab` is consistent with the slot parameter in `tab-label`.
`sort`	Triggered when sorting. The callback parameter is `(fromIndex: number, toIndex: number)`, indicating moving from the original position (`fromIndex`) to the new position (`toIndex`).

Methods

Name Description

Name	Description
`scrollTabIntoView`	When a horizontal scroll bar is generated in the tab container, scroll the specified tab into view. `function scrollTabIntoView(tabName: string): void`

scrollTabIntoView

When a horizontal scroll bar is generated in the tab container, scroll the specified tab into view.

function scrollTabIntoView(tabName: string): void

Configs

Key Type Default Description

Key	Type	Default	Description
`tabs.matches`	`function`	See description.	The function signature is the same as the `to` prop of the `Tab` component. The default value is: `function (current, to) { return current.fullPath === to.fullPath }`

tabs.matches

function

See description.

The function signature is the same as the to prop of the Tab component. The default value is:

function (current, to) {
  return current.fullPath === to.fullPath
}

Icons

Name	Description
`add`	Add button.
`remove`	Remove button.
`prev`	Left arrow button.
`next`	Right arrow button.
`success`	Success status.
`warning`	Warning status.
`info`	Normal information status.
`error`	Error status.

Edit this page on GitHubEdit