IT Tools

Handy tools for developer

Compare Texts

WebView Playground

ReactJS Playground

Json Web Tokens

Regular Expressions

Image Crop

Color Picker

QR Code

Generate Text

Generate API Response

JSON Formatter

Number Converter

Random Wheel

Ctrl + K

Tabs

Preview

Photos

Music

Videos

Disabled

Show code

<Tabs
  variant="solid"
  radius="medium"
  size="medium"
  disabled={undefined}
  tabs={[
    {
      title: "Photos",
    },
    {
      title: "Music",
    },
    {
      title: "Videos",
    },
    {
      title: "Disabled",
      disabled: true,
    },
  ]}
  selectedIndex={activeIndex}
  onChange={setActiveIndex}
/>

Docs

Name	Description	Default	Control
variant	Theme variant of Tabs	"solid"	solid bordered underlined ghost
size	Size of Tabs	"medium"	small medium large
radius	Border radius of Tabs	"medium"	none medium full
tabs *	List of tabs `Array<{title: string; disabled?: boolean}>`	-	-
selectedIndex *	Disabled status `number`	-	-
disabled	Disabled status	false	falsetrue
className	Wrapper class	-	-
onChange *	Change active tab event `(index: number) => void`	-	-

IT Tools

Tools

UI Components

Tabs

Preview

Docs