@fineui/react

ReactUI 是基于 FineUI 设计体系的 React 组件库。

✨ 特性

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• ⚙️ 全链路开发和设计工具体系。
• 🌍 数十个国际化语言支持。

📦 安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install @fineui/react --save

$ yarn add @fineui/react

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 fui。

我们在 npm 发布包内的 @fineui/react/dist 目录下提供了 main.js 以及 main.min.js。此外你还需单独引入 fineui.min.css和 fineui.min.js。

<!-- react 开发环境 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- react-ui 资源 -->
<script defer src="path/to/@fineui/react/dist/main.min.js"></script>

注意：main.js 和 main.min.js 依赖 react/react-dom/babel，请确保提前引入这些文件。

🔨 示例

import { Button, LeftLayout } from '@fineui/react';

const App = (props) => (
  <LeftLayout hgap={10} vgap={10} {...props}>
    <Button height={30}>Primary Button</Button>
  </LeftLayout>
);

export default App;

🖥 兼容环境

• 现代浏览器和 IE11（需要 polyfills）。

IE / Edge	Firefox	Chrome	Safari
IE11, Edge	last 2 versions	last 2 versions	last 2 versions