Unisolution江阴 前端技术团队组件库(React)

使用

yarn add @unisolution/components-react

// example

import { Login } from '@unisolution/component-react';

export default function () {
    return <Login />;
}

说明

• react >= 18
• antd @5.14.0
• 内置了 classnames 、ahooks 、md5

颜色系统

内置的颜色

:root {
   --uni-border-color: #D9E0EC;
  --uni-font-color-grey: #8C99B0;
  --uni-main-color: #118DF9;
  --uni-border-radius: 4px;
  --uni-font-color: #393939;
}

NOTICE: 如需有更改主题色的需求，将您的项目中的这些颜色变量覆盖即可

！！！--uni-main-color必须使用十六进制

Login

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | | ------------------- | ------------------------------------- | -------- | ----------- | ------------------------------------------------------------ | | header | React.ReactNode | 否 | null | 页面的头部 | | footer | React.ReactNode | 否 | null | 页面的底部 | | bgImg | string | 否 | ’‘ | 登录页面的背景图 | | cardBgImg | string | 否 | ’‘ | 登录区域卡片的背景图 | | title | string | 是 | '' | 系统的标题 | | loginWays | string | string[] | 否 | ['account'] | 可取三个值中任意 account、 scan 、smscode。分别代表支持账号密码登录、app扫码登录、短信验证码登录。页面的选中的登录状态会按照传递的顺序来决定，取第一项为默认的登录方式 | | thirdPartyLoginWays | React.ReactNode[] | 否 | [] | 是否显示第三方登录，如果传值则会显示在登录框的底部 | | signup | boolean | 否 | true | 是否显示注册按钮 | | onClickSignup | () => void | 否 | | 设置了 signup 之后点击注册事件 | | onScanLoginChange | (isScanLogin: boolean) => void | 否 | | 点击切换扫码登录事件 | | onGetSmscode | (phone: string) => Promise | 否 | | 点击获取手机验证码事件 | | onLogin | (params: LoginParams) => Promise | 是 | | 点击登录事件 | | miniCard | boolean | 否 | false | 卡片的样式是否是小卡片类型（整体靠右、无cardImg） |

Button

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | | -------- | ----------------------------------------- | -------- | ------- | ------------ | | type | primary | link | default | danger | 否 | default | 按钮的类型 | | disabled | boolean | 否 | false | 是否禁用按钮 | | size | large | small | normal | 否 | normal | 按钮的大小 | | loading | boolean | 否 | false | 按钮loading |

Modal

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | | --------------- | ----------------- | -------- | -------- | ------------------------------------------------------------ | | open | boolean | 否 | false | 是否显示Modal | | title | string | 否 | | Modal的标题 | | width | number | 否 | 400 | Modal的宽度 | | confirmText | string | 否 | ‘’确定‘’ | 确认按钮的文案 | | cancelText | string | 否 | ‘’取消‘’ | 取消按钮的文案 | | confirmLoading | boolean | 否 | false | 确定按钮是否loading状态 | | confirmDisabled | boolean | 否 | false | 确定按钮是否disabled状态 | | noPadding | boolean | 否 | false | Modal的content元素padding置为0 | | footer | null | ReactNode | 否 | | 为null则没有footer部分，不传默认为居中的按钮组，否则footer为传递的ReactNode | | onCancel | () => void | 否 | | 点击取消或者关闭icon触发的回调 | | onConfirm | () => void | 否 | | 点击确定按钮触发的回调 |

layer

| 方法 | 描述 | | -------------------------- | ------------------------ | | loading(msg = '加载中···') | 打开一个全屏的loading | | closeLoading() | 关闭全屏的loading | | alert(props: ModalProps) | 显示一个modal形状的通知 | | confirm(props: ModalProps) | 打开一个确认框 | | error(message: string) | 显示一个toast 错误消息 | | msg(message: string) | 显示一个toast 成功消息 | | warn(message: string) | 显示一个toast 警告消息 | | info(message: string) | 显示一个toast 普通的消息 |