Tabs

Toggle content inside a container

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

---
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-active="true">...</div>
    <div>...</div>
    <div>...</div>
</Tabs>

<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-active="true">...</div>
    <div>...</div>
    <div>...</div>
</Tabs>

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-active="true">...</div>
        <div>...</div>
        <div>...</div>
    </Tabs>
)

export default Component

---
import { Tabs, Tab } from 'webcoreui/astro'

const items = [{
    label: 'Introduction',
    value: 'intro',
    active: true
}, {
    label: 'Setup',
    value: 'setup'
}, {
    label: 'Conclusion',
    value: 'conclusion'
}]
---

<Tabs items={items}>
    <Tab active={true}>...</Tab>
    <Tab>...</Tab>
    <Tab>...</Tab>
</Tabs>

The Tabs component expects an items prop. Each item must have a label and a value. Set the initially active tab using the active property, and also set the content as active using a data-active attribute or the active prop on the Tab component.

If the order of tabs is different from the order of the items, you must use a data-tab attribute (or id on the Tab component) that matches the value of the item:

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

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
}

// Single Tab component
type TabProps = {
    element?: string
    id?: string
    active?: boolean
    className?: string
}

Prop	Purpose
`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.

Changelog

v1.5.0 Added Tab component along with several improvements.
v0.0.10 Added in version.

<- Table Textarea ->

Request improvement for this page