QUI VSCode0.7.0

Tabs

import {
  Tab,
  TabLabel,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
} from "@qui/react-vscode"

Examples

Showcase

Dark Modern
Problems panel
import {ReactNode} from "react"


import {
  Tab,
  TabLabel,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
} from "@qui/react-vscode"


export default function Showcase(): ReactNode {
  return (
    <Tabs>
      <TabList>
        <Tab>
          <TabLabel>PROBLEMS</TabLabel>
        </Tab>
        <Tab>
          <TabLabel>OUTPUT</TabLabel>
        </Tab>
        <Tab disabled>
          <TabLabel>TERMINAL</TabLabel>
        </Tab>
        <Tab>
          <TabLabel>PORTS</TabLabel>
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Problems panel</TabPanel>
        <TabPanel>Output panel</TabPanel>
        <TabPanel>Terminal panel</TabPanel>
        <TabPanel>Ports panel</TabPanel>
      </TabPanels>
    </Tabs>
  )
}

API

TabsProps

Name & DescriptionOption(s)Default
alignment
Governs the horizontal placement of the tablist relative to the panel content.
| 'start'
| 'end'
'start'
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'div'
children
React children prop.
ReactNode
defaultIndex
The initial index of the selected tab.
number
id
id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
string
index
The index of the selected tab (in controlled mode)
number
lazyMode
The lazy behavior of tab panel content when not active.
  • keepMounted: The contents of inactive tab panels are initially unmounted, but stay mounted after selection.
  • unmount: The contents of inactive tab panels are always unmounted.
  • off: The contents of inactive panels are always mounted.
| 'unmount'
| 'keepMounted'
| 'off'
'off'
manual
If true, each tab will be manually activated and display its panel by pressing Space or Enter.

If false, each tab will be automatically activated and their panel is displayed when they receive focus.
boolean
false
onIndexChange
Callback fired when the index (controlled or un-controlled) changes.

The callback includes a reason parameter which indicates why the event was fired:
    • select: The user selected a new tab.
    • reset: The available tabs were added or removed, and the previously selected tab index is no longer available.
    (
      index: number,
      reason: 'select' | 'reset',
      event?:
        | MouseEvent
        | KeyboardEvent<any>,
    ) => void
    Type
    | 'start'
    | 'end'
    Default
    'start'
    Description
    Governs the horizontal placement of the tablist relative to the panel content.
    Type
    | ElementType
    | ComponentType
    Default
    'div'
    Description
    The component used for the root node. It can be a React component or element.
    Type
    ReactNode
    Description
    React children prop.
    Type
    number
    Description
    The initial index of the selected tab.
    Type
    string
    Description
    id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
    Type
    number
    Description
    The index of the selected tab (in controlled mode)
    Type
    | 'unmount'
    | 'keepMounted'
    | 'off'
    Default
    'off'
    Description
    The lazy behavior of tab panel content when not active.
    • keepMounted: The contents of inactive tab panels are initially unmounted, but stay mounted after selection.
    • unmount: The contents of inactive tab panels are always unmounted.
    • off: The contents of inactive panels are always mounted.
    Type
    boolean
    Default
    false
    Description
    If true, each tab will be manually activated and display its panel by pressing Space or Enter.

    If     false, each tab will be automatically activated and their panel is displayed when they receive focus.
    Type
    (
      index: number,
      reason: 'select' | 'reset',
      event?:
        | MouseEvent
        | KeyboardEvent<any>,
    ) => void
    Description
    Callback fired when the index (controlled or un-controlled) changes.

    The callback includes a     reason parameter which indicates why the event was fired:
      • select: The user selected a new tab.
      • reset: The available tabs were added or removed, and the previously selected tab index is no longer available.

      TabListProps

      Name & DescriptionOption(s)Default
      children
      *
      React children prop.
      ReactNode
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'div'
      Type
      ReactNode
      Description
      React children prop.
      Type
      | ElementType
      | ComponentType
      Default
      'div'
      Description
      The component used for the root node. It can be a React component or element.

      TabProps

      Name & DescriptionOption(s)Default
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'button'
      children
      React children prop.
      ReactNode
      disabled
      If true, the component is disabled and not clickable.
      boolean
      false
      id
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
      string
      readOnly
      If true, the component is focusable but not clickable.
      boolean
      false
      Type
      | ElementType
      | ComponentType
      Default
      'button'
      Description
      The component used for the root node. It can be a React component or element.
      Type
      ReactNode
      Description
      React children prop.
      Type
      boolean
      Default
      false
      Description
      If true, the component is disabled and not clickable.
      Type
      string
      Description
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
      Type
      boolean
      Default
      false
      Description
      If true, the component is focusable but not clickable.

      TabPanelsProps

      Name & DescriptionOption(s)Default
      children
      *
      React children prop.
      ReactNode
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'div'
      Type
      ReactNode
      Description
      React children prop.
      Type
      | ElementType
      | ComponentType
      Default
      'div'
      Description
      The component used for the root node. It can be a React component or element.

      TabPanelProps

      Name & DescriptionOption(s)Default
      children
      *
      React children prop.
      ReactNode
      as
      The component used for the root node. It can be a React component or element.
      | ElementType
      | ComponentType
      'div'
      id
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
      string
      Type
      ReactNode
      Description
      React children prop.
      Type
      | ElementType
      | ComponentType
      Default
      'div'
      Description
      The component used for the root node. It can be a React component or element.
      Type
      string
      Description
      id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
      Previous
      Table
      Next
      Tooltip
      Examples
      Showcase
      API
      TabsProps
      TabListProps
      TabProps
      TabPanelsProps
      TabPanelProps
      Copyright © 2025 QUALCOMM incorporated. All rights reserved.