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, and this page is available as Markdown at https://ooui-react.pages.dev/components/panel-layout/index.md.
ooui-react
  • 中文

      • PanelLayout 面板

      源代码 | 原版组件

      面板：带一组形态开关（内边距、滚动、铺满、边框）的内容容器，也是 StackLayout 等布局组件的基础。

      基本用法

      带内边距与边框的面板；内容超高时出现滚动条。

      第二段。

      第三段。

      第四段。

      第五段。

      import { PanelLayout } from "ooui-react";

function App() {
  return (
    <div style={{ position: "relative", height: 120 }}>
      <PanelLayout padded scrollable framed>
        <p>带内边距与边框的面板；内容超高时出现滚动条。</p>
        <p>第二段。</p>
        <p>第三段。</p>
        <p>第四段。</p>
        <p>第五段。</p>
      </PanelLayout>
    </div>
  );
}

export default App;

      expanded（缺省开启）形态按绝对定位铺满父元素，父元素需自行定位并给定尺寸——上面外层 div 的 position: relative 与 height 即为此而设；父元素不定位、不给尺寸时，面板会以更外层的定位祖先（乃至视口）为基准铺开，看起来像「消失」。expanded={false} 为 static 形态、按内容收缩排列：

      static 形态：不铺满父元素、按内容收缩，无需定位与给定尺寸的容器。
      import { PanelLayout } from "ooui-react";

function App() {
  return (
    <PanelLayout padded framed expanded={false}>
      static 形态：不铺满父元素、按内容收缩，无需定位与给定尺寸的容器。
    </PanelLayout>
  );
}

export default App;

      以本组件为基础的 StackLayout 等布局继承该前提。

      API

      属性描述类型默认值
      padded是否留出内边距booleanfalse
      scrollable是否可滚动booleanfalse
      expanded是否铺满父元素booleantrue
      framed是否带边框booleanfalse
      hidden是否隐藏（三态语义见 Layout）boolean | 'until-found'—
      ...rest原生 div 属性（className、id、data-* 等）直传根元素HTMLAttributes<HTMLDivElement>—

      另见