> For AI agents: the complete documentation index is available at https://ooui-react.pages.dev/llms.txt, the full documentation bundle is available at https://ooui-react.pages.dev/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](https://ooui-react.pages.dev/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;
```

不经 IndexLayout 直接渲染时，`active` 显式声明激活态（输出 `oo-ui-tabPanelLayout-active` 类；面板缺省 `expanded` 铺满已定位的父元素，static 摆放传 `expanded={false}`）：

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

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <TabPanelLayout active padded expanded={false}>
        常规面板：声明 active，根元素输出 oo-ui-tabPanelLayout-active 类
      </TabPanelLayout>
      <TabPanelLayout padded expanded={false} hidden>
        高级面板：hidden 时整面板隐藏
      </TabPanelLayout>
    </div>
  );
}

export default App;
```

## API

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

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

## 另见

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