OutlineSelect 大纲选择

源代码 | 原版组件

大纲样式的选择列表：用 level（0–2）表达层级缩进，适合目录这类有从属关系的列表。

基本用法

当前项：intro

import { useState } from "react";
import { OutlineSelect } from "ooui-react";

function App() {
  const [value, setValue] = useState<string | number>("intro");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 240 }}>
      <OutlineSelect
        aria-label="文档大纲"
        value={value}
        onChange={setValue}
        options={[
          { value: "intro", children: "引言", level: 0 },
          { value: "background", children: "背景", level: 1 },
          { value: "prior", children: "相关工作", level: 1 },
          { value: "method", children: "方法", level: 0 },
          { value: "dataset", children: "数据集", level: 2 },
        ]}
      />
      <div>当前项：{String(value)}</div>
    </div>
  );
}

export default App;

层级与分组

level 取 0–2（超出钳制），主题仅提供三级缩进。
不带 value 的选项渲染为分组标题，与选择与选项一致。
带图标槽位的选项支持 icon 与 flags（给图标着色，见选择与选项 · 图标与标志）。
键盘：聚焦整组后 ↑↓←→ 移动高亮、Enter 选定；Home/End/PageUp/PageDown 由 handleNavigationKeys 启用，listWrapsAround 控制是否环绕——与 Select 完全一致。

当前项：getting-started

import { useState } from "react";
import { OutlineSelect } from "ooui-react";

function App() {
  const [value, setValue] = useState<string | number>("getting-started");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 240 }}>
      <OutlineSelect
        aria-label="分组大纲"
        value={value}
        onChange={setValue}
        options={[
          { children: "入门" },
          { value: "getting-started", children: "快速上手", level: 1, icon: "book" },
          { value: "installation", children: "安装", level: 1 },
          { children: "进阶" },
          { value: "theming", children: "主题", level: 1, icon: "palette", flags: "progressive" },
          { value: "i18n", children: "国际化", level: 1 },
        ]}
      />
      <div>当前项：{String(value)}</div>
    </div>
  );
}

export default App;

API

继承 Select 的属性（value / defaultValue / onChange / disabled / handleNavigationKeys / listWrapsAround 等），差异在于：

属性	描述	类型	默认值
`options`	大纲选项集（必填），可选项额外支持 `level`（0–2 缩进层级）与 `icon` / `flags`	`OutlineSelectOptionProps[]`	—
`tabIndex`	Tab 序，作用在整组（大纲列表可聚焦）	`number \| null`	`0`

outline 由组件固定开启，不可覆盖。

另见

基础选择列表：Select
选项数据与键盘焦点模型：选择与选项

#OutlineSelect 大纲选择

#基本用法

#层级与分组

#API

#另见

OutlineSelect 大纲选择

基本用法

层级与分组

API

另见