安装

$ npm install @rdyl-design/react
# or
$ yarn add @rdyl-design/react

开始使用

1. TypeScript支持

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@rdyl-design/types/type.d.ts" // 添加
    ],
  }
}

2. 导入样式文件

// app.tsx
import '@rdyl-design/dist/index.less'

3. Theme变量(可自定义)

:root {
  /* primary 主题色 */
  --primary: #08979c;
  --primary-hover: #54afb2;

  /* 背景颜色 */
  --bg: #fff;
  --bg-mask: #ffffff40;
  --bg-hover: #f8f8f8;
  --bg-primary: #e6fffb;
  --bg-primary-mask: #13c2c220;
  --bg-success: #f6ffed;
  --bg-danger: #fff2f0;
  --bg-warn: #fffbe6;
  --bg-head: #fafafa;

  /* 边框颜色 */
  --border: #eee;
  --border-hover: #dcdcdc;
  --border-primary: #b5f5ec;
  --border-success: #d9f7be;
  --border-danger: #ffd8bf;
  --border-warn: #fff1b8;

  /* 字体颜色 */
  --title: #27313d;
  --text: #526680;
  --text-desc: #969696;
  --text-placeholder: rgb(167, 167, 167);
  --danger: #ff4d4f;
  --danger-hover: #ffa39e;
  --warn: #ffc53d;
  --warn-hover: #ffd591;
  --success: #bae637;
  --success-hover: #eaff8f;

  /* 水印 */
  --watermark-text-color: rgba(143, 149, 158, 0.22);
}

拖动排序功能

使用@dnd-kit,已经内置安装所需要依赖

``