Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic Usage
  2. Compose with e.g. NavLink
  3. Prop Table

TabItem

import { Tabs, TabItem } from '@duik/it'
import Tabs, { TabItem } from '@duik/tabs'

Prestyled tab item for your tab navigation. TabItem renders "a" by default with tabindex="0" You can check more examples (e.g. with react-router-dom) on Building Tab Navigation page.

Basic Usage Within Widget

Widget Content

Compose with Component Property

By default, TabItem renders "a" tag, simply override this behaviour with "Component property" like so:
<TabItem Component={NavLink} to="/docs/react/tab-item">React Router Link</TabItem>.

See react-router-dom usage here or explore more about "Component" property here.

Prop table

className

Required: false

type: string
className, e.g. "my-custom-styling"
children

Required: false

type: React.ReactNode
Children nodes, e.g. TabItem(s)
Component

Required: false

type: React.Component | React.FunctionalComponent | string

default value: "a"

Renders the component with a given react element. By default, the component renders <a />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
leftEl

Required: false

type: React.ReactNode
Renders node on the left side with some styling
rightEl

Required: false

type: React.ReactNode
Renders node on the right side with some styling
...rest

Required: false

type: any
Other properties are passed down to the wrapping element