For AI agents: the complete documentation index is available at /ooui-react/llms.txt, the full documentation bundle is available at /ooui-react/llms-full.txt, and this page is available as Markdown at /ooui-react/components/tab-panel-layout/index.md.
  • 中文
  • TabPanelLayout 页签面板

    源代码 | 原版组件

    页签面板:IndexLayout 的 options 数组项,根元素声明 role="tabpanel"。一般不直接渲染。

    单独使用

    active 声明激活态(输出 oo-ui-tabPanelLayout-active 类)。label / value / disabled 是随页签集对象透入的字段,组件会吞掉、不落成 DOM 属性。面板缺省 expanded(绝对定位铺满父元素),单独摆放时需要已定位并给定尺寸的父元素。

    常规设置内容
    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;

    API

    继承 PanelLayout 全部属性,另有:

    属性描述类型默认值
    active是否为当前激活面板booleanfalse
    scrollable是否可滚动(面板缺省可滚)booleantrue
    label / value / disabled随页签集对象透入,仅供组件吞掉ReactNode / string | number / boolean—

    另见