> 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.

# PageLayout 页面布局

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

分页面板：[StackLayout](https://ooui-react.pages.dev/components/stack-layout/index.md) 的 `options` 数组项。一般不直接渲染，把它写进 StackLayout 的 `options` 即可。

## 单独使用

单独使用时，激活态由 `active` 声明；未声明 `active` 时按「非 `hidden` 即激活」派生，并输出 `oo-ui-pageLayout-active` 类。`label` / `value` 是随页签集对象传入的字段，组件会接收、不会写成 DOM 属性。

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

function App() {
  return (
    <StackLayout
      value="a"
      options={[
        { value: "a", label: "第一页", padded: true, children: "第一页内容" },
        { value: "b", label: "第二页", padded: true, children: "第二页内容" },
      ]}
    />
  );
}

export default App;
```

不经 StackLayout 直接渲染时，`active` 与 `hidden` 显式声明激活态（面板缺省 `expanded` 铺满已定位的父元素，static 摆放传 `expanded={false}`）：

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

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <PageLayout active padded expanded={false}>
        激活页：声明 active，根元素输出 oo-ui-pageLayout-active 类
      </PageLayout>
      <PageLayout padded expanded={false} hidden>
        隐藏页：hidden 派生为非激活
      </PageLayout>
    </div>
  );
}

export default App;
```

## API

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

| 属性                | 描述                                                                              | 类型                               | 默认值           |
| ----------------- | ------------------------------------------------------------------------------- | -------------------------------- | ------------- |
| `active`          | 是否为激活页；缺省时由 `hidden` 派生（非 `hidden` 即激活）——continuous 模式下所有页均可见、该派生失效，需显式传入以区分激活态 | `boolean`                        | 由 `hidden` 派生 |
| `scrollable`      | 是否可滚动（分页缺省可滚）                                                                   | `boolean`                        | `true`        |
| `label` / `value` | 随页签集对象传入，仅供组件接收，不写成 DOM 属性                                                      | `ReactNode` / `string \| number` | —             |

## 另见

- 分页容器：[StackLayout](https://ooui-react.pages.dev/components/stack-layout/index.md)