介绍

@kweaver-ai/ui 让 antd 使用更加得心应手，实现业务的快速迭代。其中包含 antd 所有组件，以及一些高频次自定义业务组件，支持按需打包。 支持 typescript

安装

安装包

yarn add @kweaver-ai/ui

使用

使用组件

import { Button } from "@kweaver-ai/ui";
import "@kweaver-ai/ui/dist/ui.min.css";

使用图标

import { ApplistOutlined, ApplistFilled } from "@kweaver-ai/ui/icons";

// outlined 为线框风格
// filled 为实底风格

按需加载

1、js 按需加载：

• @kweaver-ai/ui 默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from '@kweaver-ai/ui' 就会有按需加载的效果。

2、样式按需加载：

• 手动引入：

import { Button } from "@kweaver-ai/ui";
import "@kweaver-ai/ui/es/button/style";

• 如果你使用了 babel，可以使用babel-plugin-import来进行按需加载，加入这个插件后：

import { Button } from "@kweaver-ai/ui";

注：babel-plugin-import的配置如下

{
  plugins: [
    [
      "import",
      {
        libraryName: "@kweaver-ai/ui",
        style: true, // or 'css'
        customName: require("@kweaver-ai/ui/utils"), // or (name, file) => require('@kweaver-ai/ui/utils')(name, file, 'es'). default 'lib'.
      },
    ],
  ];
}