Livod-ui

介绍

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

$3

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

方式二： npm

``

js

npm install livod-ui

js

// 我们提供esm从而享受tree shaking的能力

import { Modal } from "livod-ui";









$3



Livod-UI 在线文档





$3



文档生成

js

npm run docs





运行单元测试

js

npm run test





DEMO 运行



> 不推荐



npm run dev





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



$3



|  组件名  | 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       |  ✍️  |



$3



$3



未实现案例



- 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" |



$3



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



你可以选择这样导入

js

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

Livod-ui

介绍

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

$3

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

方式二： npm

``

js

npm install livod-ui

js

// 我们提供esm从而享受tree shaking的能力

import { Modal } from "livod-ui";









$3



Livod-UI 在线文档





$3



文档生成

js

npm run docs





运行单元测试

js

npm run test





DEMO 运行



> 不推荐



npm run dev





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



$3



|  组件名  | 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       |  ✍️  |



$3



$3



未实现案例



- 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" |



$3



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



你可以选择这样导入

js

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