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;

不经 IndexLayout 直接渲染时，active 显式声明激活态（输出 oo-ui-tabPanelLayout-active 类；面板缺省 expanded 铺满已定位的父元素，static 摆放传 expanded={false}）：

常规面板：声明 active，根元素输出 oo-ui-tabPanelLayout-active 类

import { TabPanelLayout } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <TabPanelLayout active padded expanded={false}>
        常规面板：声明 active，根元素输出 oo-ui-tabPanelLayout-active 类
      </TabPanelLayout>
      <TabPanelLayout padded expanded={false} hidden>
        高级面板：hidden 时整面板隐藏
      </TabPanelLayout>
    </div>
  );
}

export default App;

API

继承 PanelLayout 全部属性，另有：

属性	描述	类型	默认值
`active`	是否为当前激活面板	`boolean`	`false`
`scrollable`	是否可滚动（面板缺省可滚）	`boolean`	`true`
`label` / `value` / `disabled`	随页签集对象传入，仅供组件接收，不写成 DOM 属性	`ReactNode` / `string \| number` / `boolean`	—

另见

页签容器（含 tabpanel 关联）：IndexLayout

#TabPanelLayout 页签面板

#单独使用

#API

#另见

TabPanelLayout 页签面板

单独使用

API

另见