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`	是否为当前激活面板	`boolean`	`false`
`scrollable`	是否可滚动（面板缺省可滚）	`boolean`	`true`
`label` / `value` / `disabled`	随页签集对象透入，仅供组件吞掉	`ReactNode` / `string \| number` / `boolean`	—

另见

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

#TabPanelLayout 页签面板

#单独使用

#API

#另见

TabPanelLayout 页签面板

单独使用

API

另见