开始使用

@rexd/core 基于 React 的多端自适应组件库。

caution

ReX Design 组件库目前仍处于 beta 阶段，请勿用于生产环境。

安装

yarn add @rexd/core

兼容性说明

• 组件库兼容 react ^16.8.0 || ^17.0.0
• 组件库 用到了一些较新的浏览器 API，只兼容较新版本的 PC 端浏览器或手机浏览器
  • chrome: ?
  • safari: ?

使用

引入 AppProvider

@rexd/core 组件依赖 AppProvider 提供的全局样式，你需要在页面的最外层包裹一个 <AppProvider root>：

import { AppProvider } from '@rexd/core';

<AppProvider root>{children}</AppProvider>;

使用组件

import { Button, Dialog } from '@rexd/core';

<Button

type="primary"

onClick={() => {

Dialog.show({ title: '对话框', content: 'hello rexd' });

}}

>

按钮

</Button>;

切换颜色模式与设备

通过 AppProvider 可以设置颜色模式与设备：

import { AppProvider } from '@rexd/core';

<AppProvider root colorMode="dark" device="phone">

{children}

</AppProvider>;

AppProvider 允许简单的嵌套，这样可以让颜色模式和设备只在指定的层级内发生变化，注意只有 root=false 的 AppProvider 可以被嵌套在其他 AppProvider 内：

<AppProvider root colorMode="dark">

<AppProvider colorMode="light" device="phone">

{children}

</AppProvider>

</AppProvider>

切换能力依赖 CSS 变量 特性，root Provider 会将 CSS 变量注入至 :root，非 root 的 AppProvider 会将 CSS 变量的注入至最近的上级 DOM 节点，。

自定义主题

（开发中，敬请期待）

AppProvider

字段	描述
root	boolean 是否为 root AppProvider
theme	any 主题，默认根据 colorMode 与 device 选取对应的 rexd 内置主题
device	Device 设备上下文，默认继承自上层节点；顶层默认为 DESKTOP_DEVICE
colorMode	ColorMode 颜色模式，默认继承自上层节点；顶层默认为 'light'
config	any 组件配置上下文
其他
includeNormalized	boolean 样式调整，是否引入 normalize.css。root=true 的时候默认为 true； 页面中已存在 normalize.css 的话可将该值设置为 false