快速开始

AluneUIProvider

一个文档内统一深浅主题、减少动效、浮层、反馈和确认队列。

使用方式

同一文档使用一个根 Provider。宿主解析系统主题与减少动态效果，并在业务布局样式前导入 styles.css；iframe 各自拥有独立 Provider。

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

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

运行示例

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

查看运行源码

源码文件

import { AluneUIProvider, Button, Space } from '@alune/ui';
import '@alune/ui/styles.css';

export default function Example({
  theme = 'light',
  reduceMotion = false,
}: {
  theme?: 'light' | 'dark';
  reduceMotion?: boolean;
}) {
  return (
    <AluneUIProvider theme={theme} reduceMotion={reduceMotion}>
      <div className="example example--narrow">
        <section className="example-group">
          <h2 className="example-title">主题中的控件</h2>
          <Space wrap size="middle">
            <Button type="primary">保存</Button>
            <Button>取消</Button>
          </Space>
        </section>
        <p className="example-status">
          主题：{theme} · 减少动效：{String(reduceMotion)}
        </p>
      </div>
    </AluneUIProvider>
  );
}

API

AluneUIProvider

同一文档使用一个根 Provider。宿主解析系统主题与减少动态效果，并在业务布局样式前导入 styles.css；iframe 各自拥有独立 Provider。

查看 AluneUIProvider 实现 ↗

AluneUIProviderProps

属性 / 方法	类型	默认值	必填	说明
`theme`	`"light" \| "dark"`	`—`	是	宿主解析后的浅色或深色主题。
`reduceMotion`	`boolean`	`false`	否	减少动态效果，系统偏好由宿主解析后传入。
`children`	`ReactNode`	`—`	是	渲染的子内容。

查看 AluneUIProviderProps 实现 ↗

交互与使用限制

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

同一文档使用一个根 Provider。宿主解析系统主题与减少动态效果，并在业务布局样式前导入 styles.css；iframe 各自拥有独立 Provider。

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

查看实现 ↗ 编辑文档 ↗ 设计与验收