Tabs

Tabs displays a container that allows the user to switch between different screens.

Import

import { Tabs } from "@prismane/core";

Usage

<Tabs defaultValue="first">
  <Tabs.List>
    <Tabs.Tab value="first">First</Tabs.Tab>
    <Tabs.Tab value="second">Second</Tabs.Tab>
    <Tabs.Tab value="third">Third</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="first">First</Tabs.Panel>
  <Tabs.Panel value="second">Second</Tabs.Panel>
  <Tabs.Panel value="third">Third</Tabs.Panel>
</Tabs>

Different Tabs Variant

<Tabs defaultValue="first" variant="filled">
  <Tabs.List>
    <Tabs.Tab value="first">First</Tabs.Tab>
    <Tabs.Tab value="second">Second</Tabs.Tab>
    <Tabs.Tab value="third">Third</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="first">First</Tabs.Panel>
  <Tabs.Panel value="second">Second</Tabs.Panel>
  <Tabs.Panel value="third">Third</Tabs.Panel>
</Tabs>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Tabs

Go BackTable

Up NextText