For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/components/loading-bar.md.
  • 简体中文
  • LoadingBar 顶部加载条

    展示页面或任务的加载进度。

    基本用法

    basic.tsx
    import { Button, useLoadingBar } from '@ifhover/leaf-ui';
    
    export function LoadingBarBasic() {
      const bar = useLoadingBar();
      return (
        <Button
          onClick={() => {
            const done = bar.start();
            setTimeout(done, 1600);
          }}
        >
          模拟页面加载
        </Button>
      );
    }
    

    更多用法

    advanced.tsx
    import { Button, Space, useLoadingBar } from '@ifhover/leaf-ui';
    
    export function LoadingBarProgress() {
      const bar = useLoadingBar();
      return (
        <Space>
          <Button
            variant="outline"
            onClick={() => {
              bar.reset();
              bar.start();
              bar.set(40);
            }}
          >
            进度 40%
          </Button>
          <Button onClick={() => bar.finish()}>完成</Button>
          <Button variant="ghost" onClick={() => bar.reset()}>
            重置
          </Button>
        </Space>
      );
    }
    

    使用说明

    ConfigProvider 自动提供加载条。start() 返回对应任务的完成函数,适合在 finally 中调用。多个任务同时运行时,全部完成后才结束。

    类型

    组装数据、定义回调和使用 ref 时,可以导入这些类型。

    import type { LoadingBarApi, LoadingBarProps, LoadingBarProviderProps } from '@ifhover/leaf-ui';

    LoadingBarApi API

    属性类型默认值说明
    start() => () => void必填开始任务,返回该任务完成函数
    finish() => void必填完成一个任务,全部完成后收起
    set(progress: number) => void必填设置显示进度
    reset() => void必填重置状态或重试

    LoadingBarProps API

    属性类型默认值说明
    activebooleanfalse正在加载
    progressnumber—进度 0–100,省略时自动估计
    colorstring—颜色
    heightnumber3高度,数字按像素计算
    position'top' | 'bottom''top'显示或插入位置
    classNamestring—容器类名
    styleCSSProperties—容器内联样式

    LoadingBarProviderProps API

    属性类型默认值说明
    colorstring—颜色
    heightnumber3高度,数字按像素计算
    position'top' | 'bottom''top'显示或插入位置
    classNamestring—容器类名
    styleCSSProperties—容器内联样式
    childrenReactNode—内容或下级项目