基础组件

Spin

AluneUIProvider 将默认指示替换为 MoonLoader,其余保留 Ant Design 原有属性、类型与行为。

使用方式

加载由宿主传入状态和回调,适合在不同应用和文档中复用。先完成快速开始中的 Provider 与样式配置。

import { Spin } from '@alune/ui';

接入要求见快速开始,选择依据见 交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档;所有回调只更新本地模拟数据。

真实示例 TSX 独立预览 ↗
查看运行源码
源码文件
import { Spin } from '@alune/ui';

export default function Example() {
  return (
    <div className="example">
      <section className="example-group">
        <h2 className="example-title">独立加载</h2>
        <div className="example-row">
          <Spin aria-label="正在加载" />
          <span>正在获取内容…</span>
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">内容加载</h2>
        <div className="example-panel">
          <Spin description="加载示例…">
            <div className="example-placeholder">等待中的内容</div>
          </Spin>
        </div>
      </section>
    </div>
  );
}

API

直接转导出 Ant Design 的 Spin,保留原始 Props、泛型、复合成员与回调语义。下表列出常用属性;类型取自当前安装版本,默认值沿用 Ant Design 6。

AluneUIProvider 统一主题与减少动效;宿主维护受控状态、校验和业务回调。

Spin 完整 API 与默认值 ↗

Spin

SpinProps

属性 / 方法 类型 默认值 必填 说明
spinning boolean true 否 是否显示加载状态。
size "default" | SizeType default 否 加载图标尺寸。
delay number — 否 延迟显示的毫秒数。
tip ReactNode — 否 嵌套或全屏模式的加载说明。

交互与使用限制

为每个操作提供可访问名称,为输入关联 label;使用语义化组件和清晰焦点。不要只靠颜色传达状态,禁用与等待时避免重复执行。

宿主负责状态、业务操作、错误处理与真实内容。组件不读取业务 store、路由或 Electron。示例中的反馈和等待均为本地模拟。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。