livod-ui v0.0.47

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文件即可

进度

细节区别

Modal

未实现案例

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

描述

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

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

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

API 区别

Dropdown

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

你可以选择这样导入

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

实现案例

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

描述

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

API 区别

更多 API 区别请参考文档