Layout 布局基类

源代码 | 原版组件

布局基类：其余布局组件的共同根。单独使用时只提供 oo-ui-layout 根类与 hidden 三态控制。

隐藏的三态

hidden 有三态：true 完全隐藏（hidden 属性 + aria-hidden）；'until-found' 视觉隐藏但对浏览器页内查找（Ctrl+F）可见——查找命中时浏览器自动显示该元素并派发 beforematch 事件，可在元素上监听做自定义联动（IndexLayout 的 openMatchedPanels 就是这种用法）；不传则不隐藏。

当前可见

hiddenuntil-found取消隐藏

import { useState } from "react";
import { Button, Layout } from "ooui-react";

function App() {
  const [hidden, setHidden] = useState<boolean | "until-found">(false);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Layout hidden={hidden}>
        <p>
          {hidden === "until-found"
            ? "对查找可见：用浏览器 Ctrl+F 搜本段文字，浏览器会自动定位并显示"
            : "当前可见"}
        </p>
      </Layout>
      <div style={{ display: "flex", gap: 8 }}>
        <Button onClick={() => setHidden(true)}>hidden</Button>
        <Button onClick={() => setHidden("until-found")}>until-found</Button>
        <Button onClick={() => setHidden(false)}>取消隐藏</Button>
      </div>
    </div>
  );
}

export default App;

Note

React 18 会把 'until-found' 一并写成布尔 hidden，组件在提交后手动补写属性使其生效；React 19 起类型原生支持后即不再需要。

API

属性	描述	类型	默认值
`hidden`	是否隐藏：`true` 完全隐藏；`'until-found'` 视觉隐藏但对页内查找可见	`boolean \| 'until-found'`	—
`...rest`	原生 `div` 属性（`className`、`id`、`data-*` 等）直传根元素；需要监听 `beforematch` 时经 ref 添加原生监听（React 18 的类型尚未收录该事件）	`HTMLAttributes<HTMLDivElement>`	—

另见

在其上的形态开关：PanelLayout
until-found 的完整应用：IndexLayout 的 openMatchedPanels

#Layout 布局基类

#隐藏的三态

#API

#另见

Layout 布局基类

隐藏的三态

API

另见