TabPanelLayout

Source | Original component

A tab panel: an item of IndexLayout's options array, with role="tabpanel" on the root. You rarely render it directly.

Standalone use

active declares the active state (outputs the oo-ui-tabPanelLayout-active class). label / value / disabled are fields carried along with the tab-set object — the component consumes them, so they are never written as DOM attributes. The panel defaults to expanded (fills its parent via absolute positioning), so when placed on its own it needs a positioned, sized parent.

General settings

import { IndexLayout } from "ooui-react";

function App() {
  return (
    <div style={{ position: "relative", height: 180 }}>
      <IndexLayout
        defaultValue="general"
        options={[
          { value: "general", label: "General", padded: true, children: "General settings" },
          { value: "advanced", label: "Advanced", padded: true, children: "Advanced settings" },
        ]}
      />
    </div>
  );
}

export default App;

Rendered without an IndexLayout, the active state is declared via active (the root emits the oo-ui-tabPanelLayout-active class; panels default to expanded, filling a positioned parent — pass expanded={false} to place them statically):

General panel: declared with active, the root emits the oo-ui-tabPanelLayout-active class

import { TabPanelLayout } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <TabPanelLayout active padded expanded={false}>
        General panel: declared with active, the root emits the oo-ui-tabPanelLayout-active class
      </TabPanelLayout>
      <TabPanelLayout padded expanded={false} hidden>
        Advanced panel: fully hidden while hidden
      </TabPanelLayout>
    </div>
  );
}

export default App;

API

Inherits all PanelLayout props, plus:

Prop	Description	Type	Default
`active`	Whether this is the active panel	`boolean`	`false`
`scrollable`	Whether scrollable (panels scroll by default)	`boolean`	`true`
`label` / `value` / `disabled`	Carried with the tab-set object, consumed by the component	`ReactNode` / `string \| number` / `boolean`	—

#TabPanelLayout

#Standalone use

#API

#See also

TabPanelLayout

Standalone use

API

See also