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, and this page is available as Markdown at /ooui-react/components/indicator/index.md.
  • 中文
  • Indicator 指示器

    源代码 | 原版组件

    指示器组件,通常在其他组件内渲染表示特定含义。

    基本用法

    四种取值:up、down、clear(关闭叉)、required(必填星号)。

    import { Indicator } from "ooui-react";
    
    function App() {
      return (
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <Indicator indicator="up" title="up" />
          <Indicator indicator="down" title="down" />
          <Indicator indicator="clear" title="clear" />
          <Indicator indicator="required" title="required" />
        </div>
      );
    }
    
    export default App;

    禁用态

    disabled 输出 oo-ui-widget-disabled 与 aria-disabled,主题把指示器调淡。

    import { Indicator } from "ooui-react";
    
    function App() {
      return (
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <Indicator indicator="down" title="常规" />
          <Indicator indicator="down" disabled title="禁用" />
        </div>
      );
    }
    
    export default App;

    结构

    组件渲染单个 <span>,ref 指向它,未声明的属性透传到该元素。指示器本身是无文本的装饰性图形,需要让读屏器读出含义时,请在宿主元素上给出 aria-label。

    API

    属性描述类型默认值
    indicator指示器种类'up' | 'down' | 'clear' | 'required'—
    disabled是否禁用booleanfalse
    ...rest原生 span 属性(className、title、aria-*、事件等)直传根元素HTMLAttributes<HTMLSpanElement>—