Livod-ui

介绍

Livod-ui 基于 React-overlays，致力于提供最轻量级的 UI 框架，且提供最大程度与 Ant-design 兼容的 API。

导入

方式一： 将源代码拉取至本地，使用 npm i 安装相关依赖，运行 npm run build。根目录下生成 esm 文件，即可使用(需导入 react-overlays 包)。

方式二： npm

npm install livod-ui

// 我们提供esm从而享受tree shaking的能力
import { Modal } from "livod-ui";

在线文档

Livod-UI 在线文档

本地文档

文档生成

npm run docs

运行单元测试

npm run test

DEMO 运行

不推荐

npm run dev

添加demo 文件夹，在目录下创建index.tsx和index.html文件即可

进度

| 组件名 | Antd 官方案例数 | 已完成案例数 | 完成 | | :------: | :-------------: | :----------: | :--: | | Modal | 13 | 10 | 👌 | | Dropdown | 10 | 4 | 👌 | | Checkbox | 6 | 5 | 👌 | | message | 8 | 6 | 👌 | | Radio | 9 | 4.5 | ✍️ | | Popover | 6 | 2 | ✍️ | | Tooltip | 4 | 2 | ✍️ | | Button | 9 | 1 | ✍️ | | Table | 32 | 1 | ✍️ | | Input | 15 | 1 | ✍️ | | Select | 18 | 8 | ✍️ |

细节区别

Modal

未实现案例

• 1 列 4 行(手动更新和关闭)
• 1 列 6 行(使用 Hooks 获得上下文)
• 2 列 6 行(自定义渲染对话框)

描述

1 列 4 行案例：更新状态无需调用 update 方法，可以使用 state 进行状态变更，代码可读性更强且性能更好。

1 列 6 行案例：绝大多数情况用不到 context，如需使用应优先考虑代码设计。

2 列 6 行案例：要引入 react-draggable 库且应用场景较少，可通过 Modal 组件进行二次封装设计。

API 区别

| 参数 | 说明 | 类型 | 默认值 | | :------: | :---------------------------------------------------------------------------------------------- | :-----------------------------------------------------: | :-------: | | icon | Livod-ui 内部封装了四种组件，可满足绝大部分需求，因此 icon 属性可以传入字符串或是一个 ReactNode | "success" | "error" | "info" | "warning" |ReactNode | "success" |

Dropdown

注意！ Dropdown 组件需配套使用 DropdownMenu 组件而不是 Menu!

你可以选择这样导入

import { Dropdown, DropdownMenu as Menu } from "livod-ui";

实现案例

• 1 列 1 行(基本)
• 1 列 3 行(触发方式)
• 2 列 1 行(弹出位置)
• 2 列 5 行(右键菜单)

描述

部分案例可以通过二次封装实现，Dropdown 组件如果要完整实现要进行较多改动，在此精简至基于 React-overlays 库开发可实现的最小功能。

API 区别

| 参数 | 说明 | 类型 | 默认值 | | :-----------: | :--------------------------------------------------------- | :------------------------------------------------------------------------------ | :-----: | | placement | 与 ant-design 不同，livod-ui 提供了八种可选的 placement 值 | "up"| "upEnd"| "down"| "downEnd"| "left"| "leftEnd"| "right"| "rightEnd" | "down" | | trigger | 与 ant-design 不同，trigger 属性只需要提供一个字符串 | "contextMenu" | "click" | "click" |

更多 API 区别请参考文档