> For AI agents: the complete documentation index is available at /ooui-react/llms.txt, the full documentation bundle is available at /ooui-react/llms-full.txt.

# TabPanelLayout 页签面板

> [源代码](https://github.com/BearBin1215/ooui-react/tree/main/src/layouts/TabPanelLayout) | [原版组件](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.TabPanelLayout.html "OO.ui.TabPanelLayout")

页签面板：[IndexLayout](/ooui-react/components/index-layout/index.md) 的 `options` 数组项，根元素声明 `role="tabpanel"`。一般不直接渲染。

## 单独使用

`active` 声明激活态（输出 `oo-ui-tabPanelLayout-active` 类）。`label` / `value` / `disabled` 是随页签集对象透入的字段，组件会吞掉、不落成 DOM 属性。面板缺省 `expanded`（绝对定位铺满父元素），单独摆放时需要已定位并给定尺寸的父元素。

```tsx preview
import { IndexLayout } from "ooui-react";

function App() {
  return (
    <div style={{ position: "relative", height: 180 }}>
      <IndexLayout
        defaultValue="general"
        options={[
          { value: "general", label: "常规", padded: true, children: "常规设置内容" },
          { value: "advanced", label: "高级", padded: true, children: "高级设置内容" },
        ]}
      />
    </div>
  );
}

export default App;
```

## API

继承 [PanelLayout](/ooui-react/components/panel-layout/index.md) 全部属性，另有：

| 属性                             | 描述              | 类型                                           | 默认值     |
| ------------------------------ | --------------- | -------------------------------------------- | ------- |
| `active`                       | 是否为当前激活面板       | `boolean`                                    | `false` |
| `scrollable`                   | 是否可滚动（面板缺省可滚）   | `boolean`                                    | `true`  |
| `label` / `value` / `disabled` | 随页签集对象透入，仅供组件吞掉 | `ReactNode` / `string \| number` / `boolean` | —       |

## 另见

- 页签容器（含 tabpanel 关联）：[IndexLayout](/ooui-react/components/index-layout/index.md)