PageLayout 页面布局

源代码 | 原版组件

分页面板：StackLayout 的 options 数组项。一般不直接渲染，把它写进 StackLayout 的 options 即可。

单独使用

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

第一页内容

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}）：

激活页：声明 active，根元素输出 oo-ui-pageLayout-active 类

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 全部属性，另有：

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

另见

分页容器：StackLayout

#PageLayout 页面布局

#单独使用

#API

#另见

PageLayout 页面布局

单独使用

API

另见