For AI agents: the complete documentation index is available at https://ooui-react.pages.dev/en/llms.txt, the full documentation bundle is available at https://ooui-react.pages.dev/en/llms-full.txt, and this page is available as Markdown at https://ooui-react.pages.dev/en/components/page-layout/index.md.
ooui-react
  • English

      • PageLayout

      Source | Original component

      A page panel: an item of StackLayout's options array. You rarely render it directly — put it into StackLayout's options instead.

      Standalone use

      Standalone, the active state is declared via active; without active it derives from hidden (not hidden = active) and outputs the oo-ui-pageLayout-active class. label / value are fields carried along with the page-set object — the component takes them but never writes them as DOM attributes.

      First page content
      import { StackLayout } from "ooui-react";

function App() {
  return (
    <StackLayout
      value="a"
      options={[
        { value: "a", label: "First page", padded: true, children: "First page content" },
        { value: "b", label: "Second page", padded: true, children: "Second page content" },
      ]}
    />
  );
}

export default App;

      Rendered without a StackLayout, the active state is declared via active / hidden (panels default to expanded, filling a positioned parent; pass expanded={false} to place them statically):

      Active page: declared with active, the root emits the oo-ui-pageLayout-active class
      import { PageLayout } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <PageLayout active padded expanded={false}>
        Active page: declared with active, the root emits the oo-ui-pageLayout-active class
      </PageLayout>
      <PageLayout padded expanded={false} hidden>
        Hidden page: hidden derives to inactive
      </PageLayout>
    </div>
  );
}

export default App;

      API

      Inherits all PanelLayout props, plus:

      PropDescriptionTypeDefault
      activeWhether this is the active page; without it, derived from hidden (not hidden = active) — in continuous mode all pages are visible and the derivation no longer applies, so pass it explicitlybooleanderived from hidden
      scrollableWhether scrollable (pages scroll by default)booleantrue
      label / valueCarried with the page-set object, taken by the component but never written as DOM attributesReactNode / string | number—

      See also