Search documentation v0.6.1

Tabs

Toggle content inside a container

Source ↗️ Report Issue ↗️

Use the Tabs component to separate sections within the same page, where each tab represents a different content area. Clicking on a tab displays the corresponding content while hiding the others.

Preview

Welcome to the documentation of Webcore.

To get started, run npm i webcoreui in your terminal.

You can use Webcore to rocket launch your frontend projects with fully coded components

How to use Tabs in Astro
---
import { Tabs } from 'webcoreui/astro'
const items = [{
label: 'Introduction',
value: 'intro',
active: true
}, {
label: 'Setup',
value: 'setup'
}, {
label: 'Conclusion',
value: 'conclusion'
}]
---
<Tabs items={items}>
<div data-tab="intro" data-active="true">...</div>
<div data-tab="setup">...</div>
<div data-tab="conclusion">...</div>
</Tabs>
How to use Tabs in Svelte
<script>
import { Tabs } from 'webcoreui/svelte'
const items = [{
label: 'Introduction',
value: 'intro',
active: true
}, {
label: 'Setup',
value: 'setup'
}, {
label: 'Conclusion',
value: 'conclusion'
}]
</script>
<Tabs items={items}>
<div data-tab="intro" data-active="true">...</div>
<div data-tab="setup">...</div>
<div data-tab="conclusion">...</div>
</Tabs>
How to use Tabs in React
import React from 'react'
import { Tabs } from 'webcoreui/react'
const items = [{
label: 'Introduction',
value: 'intro',
active: true
}, {
label: 'Setup',
value: 'setup'
}, {
label: 'Conclusion',
value: 'conclusion'
}]
const Component = () => (
<Tabs items={items}>
<div data-tab="intro" data-active="true">...</div>
<div data-tab="setup">...</div>
<div data-tab="conclusion">...</div>
</Tabs>
)
export default Component

The Tabs component expects an items prop. Each item must have a label and a value that must match one of the data-tab attributes. Optionally, you can set a tab as active using the active property. To also set the content as active, add a data-active attribute. Tabs can also be disabled using the disabled property in the items object:

Intro…
Setup…
const items = [{
label: 'Introduction',
value: 'intro',
active: true
}, {
label: 'Setup',
value: 'setup'
}, {
label: 'Conclusion',
value: 'conclusion',
disabled: true
}]
<Tabs items={items}>...</Tabs>

Tabs with Icons

Tabs can also be created with icons by passing SVG elements as strings to the label properties. If you want to use icons from Webcore, you can import them from webcore/icons.

Intro…
Setup…
---
import { Tabs } from 'webcoreui/astro'
import { info, github, circleCheck } from 'webcoreui/icons'
const items = [{
label: `${info} Introduction`,
value: 'intro',
active: true
}, {
label: `${github} Setup`,
value: 'setup'
}, {
label: `${circleCheck} Conclusion`,
value: 'conclusion'
}]
---
<Tabs items={items}>
<div data-tab="intro" data-active="true">...</div>
<div data-tab="setup">...</div>
<div data-tab="conclusion">...</div>
</Tabs>
<script>
import { Tabs } from 'webcoreui/svelte'
import { info, github, circleCheck } from 'webcoreui/icons'
const items = [{
label: `${info} Introduction`,
value: 'intro',
active: true
}, {
label: `${github} Setup`,
value: 'setup'
}, {
label: `${circleCheck} Conclusion`,
value: 'conclusion'
}]
</script>
<Tabs items={items}>
<div data-tab="intro" data-active="true">...</div>
<div data-tab="setup">...</div>
<div data-tab="conclusion">...</div>
</Tabs>
import React from 'react'
import { Tabs } from 'webcoreui/react'
import { info, github, circleCheck } from 'webcoreui/icons'
const items = [{
label: `${info} Introduction`,
value: 'intro',
active: true
}, {
label: `${github} Setup`,
value: 'setup'
}, {
label: `${circleCheck} Conclusion`,
value: 'conclusion'
}]
const Component = () => (
<Tabs items={items}>
<div data-tab="intro" data-active="true">...</div>
<div data-tab="setup">...</div>
<div data-tab="conclusion">...</div>
</Tabs>
)
export default Component

Themes

Tabs comes with two built-in themes: boxed and outline which can be controlled using the theme prop:

<Tabs items={items} theme="boxed">...</Tabs>
<Tabs items={items} theme="outline">...</Tabs>

Vertical Tabs

Tabs can also be created using a vertical layout. Set the vertical prop to true to display tabs under each other.

<Tabs items={items} vertical={true}>...</Tabs>
<Tabs items={items} vertical={true} theme="boxed">...</Tabs>
<Tabs items={items} vertical={true} theme="outline">...</Tabs>

Even Layout

By default, tabs only take up as much space as their label requires. This can be changed to make the tabs fill up the available space inside of its container by setting even to true:

<Tabs items={tabItems} even={true}></Tabs>
<Tabs items={tabItems} even={true} theme="boxed"></Tabs>
<Tabs items={tabItems} even={true} theme="outline"></Tabs>

API

type TabsProps = {
items: {
label: string
value: string
active?: boolean
disabled?: boolean
}[]
theme?: 'boxed' | 'outline'
vertical?: boolean
even?: boolean
className?: string
}
PropPurpose
items.label Sets the label of the tab.
items.value Sets the value of the tab which references the content.
items.active Sets the tab as the default active tab. Defaults to false.
items.disabled Disables the tab, making it inactive. Defaults to false.
theme Sets the theme of the Tabs component. Can be one of boxed, outline
vertical Displayes the tabs in a vertical layout. Defaults to false.
even Evenly distributes tabs to fill the available space. Defaults to false.
className Pass additional CSS classes for the tabs.

Request improvement for this page