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-tab="intro" data-active="true">...</div>
    <div data-tab="setup">...</div>
    <div data-tab="conclusion">...</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-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'

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
}

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.

<- Table Textarea ->

Request improvement for this page