@easyv/react-components NPM

@easyv/react-components

a react component library base on arco design

Usage

安装包

基础包

pnpm add @arco-design/web-react @arco-plugins/vite-react

主题包，例如 @arco-themes/react-easytwin

pnpm add @arco-themes/react-easytwin

配置

以 vite 为例

配置 vite.config.ts

import { vitePluginForArco } from '@arco-plugins/vite-react';

export default defineConfig({
  // ...
  plugins: [
    // ...
    vitePluginForArco({
      theme: '@arco-themes/react-easytwin',
    }),
  ],
});

如果是应用的暗色主题，请在 index.html 的 body 上添加 arco-theme="dark"，如果是亮色的，可以不加。

使用

可以统一在 components 目录下新建一个 ui.ts 文件，这个文件的主要作用就是从 @easyv/react-components 中导入组件并导出

export { Input } from '@easyv/react-components';

这样方便统一管理，后面如果要迁移组件库，只需要修改这个文件即可。

注意：不要引 @arco-design/web-react，这是依赖的基础库，但不是直接使用的库。@easyv/react-components 会基于它做一些定制。

Options

TODO

Development

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# check your project for potential problems
$ pnpm run doctor

Buglist

radius 没有应用四种尺寸
select 下的 tag 颜色没有应用对
input disabled background-color 优先级问题
radio 中心点的样式为 color-white 暗色模式下为透明色，应该为白色，文档中为 hsla(0,0%,100%,0.9)，实际配置 rgba(255,255,255,0)
input 聚焦的输入框圆角问题