> 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.

# Layout 布局基类

> [源代码](https://github.com/BearBin1215/ooui-react/tree/main/src/layouts/Layout) | [原版组件](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.Layout.html "OO.ui.Layout")

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

## 隐藏的三态

`hidden` 有三态：`true` 完全隐藏（`hidden` 属性 + `aria-hidden`）；`'until-found'` 视觉隐藏但对浏览器页内查找（Ctrl+F）可见——查找命中时浏览器自动显示该元素并派发 `beforematch` 事件，可在元素上监听做自定义联动（[IndexLayout](/ooui-react/components/index-layout/index.md) 的 `openMatchedPanels` 即此用法）；不传则不隐藏。

```tsx preview
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](/ooui-react/components/panel-layout/index.md)
- `until-found` 的完整应用：[IndexLayout](/ooui-react/components/index-layout/index.md) 的 `openMatchedPanels`