CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

DataTabs

Description#

The DataTabs is used to create a tabs using the component Tabs from Chakra ui, it is very easy and simple to use.

Import#

it can be imported from the core.

Code Example

import { DataTabs } from "@codecraftkit/core";

or alone.

Code Example

import DataTabs  from "@codecraftkit/clickoutside";

Usage#

The label will be placed in the tab title, and the content will be place inside the tab

Code Example

function MyApp() {
const [index,setIndex] = useState(0)

const data = [
  {
    label: 'Chicken',
    content: <Animation
        autoplay
        loop
        name="chicken-70"
        height={200}
        width={200}
      />
  },
  {
    label: 'Logo',
    content: <Animation
        autoplay
        loop
        name="instagram"
        height={200}
        width={200}
      />
  },
  {
    label: 'Warning',
    content: <Animation
        autoplay
        loop
        name="alert-jumping"
        height={200}
        width={200}
      />
  },
];

return <DataTabs
  data={data}
  tabIndex={index}
  setTabIndex={setIndex}
/>
}

Props#

name

type

required

default

description

data

Array<object>

yes

Array of objects that will form each tab

styles

Object

To add some extra styles

variant

lineenclosedenclosed-coloredsoft-roundedsolid-roundedunstyled

line

Change de visual style of the Tab

contentMinH

String

Min height of the tab

defaultIndex

Number

0

First tab index to be open when Tab Components render

tabIndex

State

yes

State to control the index

setTabIndex

Function

yes

Set index State

externalNav

Boolean

false

deactivate change tab by pressing tabs

fitted

Boolean

false

make tab fitted

...rest

chakra style props

It receives also every prop of Chakra-ui Tabs component