This is a Tabs example project with Vue 3 and Typescript

Example 1

This is the most basic way to use the Tabs component. The tab list will be show at the top and the names of the tabs are derived from the title prop of each Tab component.

  • Tab 1
  • Tab 2

This is Tab 1

Example 2

This example shows that the tab list items can be fully customized with there own icons if required.

  • Config
  • Tab 2

This is a config tab

Example 3

This example shows that the tab list items can be displayed at the bottom using the reverse prop on the Tabs component.

  • Config
  • Tab 2

This is a config tab

Example 4

This example shows that the tab list can be shown vertically by using the direction prop on the Tabs component.

  • Config
  • Tab 2

This is a config tab

Example 5

This example shows that the tab list can be shown in the center or end by using the position prop on the Tabs component.

  • Config
  • Tab 2

This is a config tab

Example 6

This example shows that the tab list can be shown in the center or end by using the position prop on the Tabs component.

  • Config
  • Tab 2

This is a config tab

Example 7

This example shows a list of tabs generated from an array. This can be used to dynamically generate the tabs

  • Tab 1
  • Tab 2
  • Tab 3

This is Tab 1

Example 8

This example shows a list of tabs generated from an array. This can be used to dynamically generate the tabs

  • Tab 1
  • Tab 2
  • Tab 3

This is Tab 1