Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bonree-design

Package Overview
Dependencies
Maintainers
1
Versions
177
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bonree-design

An enterprise-class UI design language and React components implementation

  • 0.2.10
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

博睿组件

ant-design 仓库 master 分支保存同步

开发

主要文件目录

├── components    # 组件源码和demo
├── docs          # 文档markdown内容
├── site          # 文档网站布局和代码
└── package.json

本地开发

windows 环境不要使用 power shell

$ npm install

$ npm run start
npm install 时 node-gyp 报错解决方案:
  1. mac 环境报错

    点击查看解决方案

    如何查看 npm 全局安装路径

  2. windows 环境下 node-gyp 提示要安装 Python

    Run CMD as Administrator:
    npm --add-python-to-path='true' install --global windows-build-tools
    

    安装 windows-build-tools 需要非常非常长的时间

    如果安装 windows-build-tools 失败,可以尝试手动安装 python

代码规范

基本原则: 多覆盖,少修改

样式改动

4.17.0 及以上版本代码中存在两套主题 less 文件,npm run build打包时使用components\style\themes\default.less,但npm run start则是使用components\style\themes\variable.less.

  • 所有样式改动只能注释源代码再新增代码

    • css 或者 less 语言缺乏逻辑性,但是互相耦合性又极强,保留源代码可以方便以后进行 debug
  • components\style\themes\index.less中配置主题

    • 不要对components\style\themes\default.less做任何改动
    • 不要对components\style\themes\variable.less做任何改动
    • 如果需要覆盖原有 less 变量,必须重新赋值
    • 如果需要新增 less 变量,必须以br-开头命名变量
    • less 变量必须要有注释
    • 全局元素样式增加在文件底部
    //  全局主色
    @primary-color: #00ccd9;
    //  页面、按钮文字颜色
    @text-color: #4e4e4e;
    //  字体最大
    @br-font-size-largest: 16px;
    //  主要用于页面卡片
    @br-border-radius-lg: 5px;
    
  • 组件样式改动

    • 不要修改源代码,不要改变代码结构
    • 不要修改源代码,不要改变代码结构
    • 不要修改源代码,不要改变代码结构
    • 必须使用注释源码,新增代码方式修改组件样式文件
组件逻辑改动

参照官方要求Code convention for antd

文档和 demo 改动

参照官方要求Configuration for Documentation and Demo

构建发布

$ npm run build

$ npm run pub

与 UI 规范的差别

select 组件

  • 搜索按钮
    • 规范:可以点击
    • 实际:不能点击
  • 清除按钮
    • 规范:一直显示
    • 实际:在输入框 hover 态才显示

transfer 组件

  • 下拉框滚动条
    • 规范:滚动条不占位
    • 实际:滚动条使用-webkit-scrollbar 进行修改,滚动条会占位,滚动条样式会在 ie 和 firefox 中失效

timepicker 组件

  • 下拉框滚动条
    • 规范:滚动条不占位
    • 实际:滚动条使用-webkit-scrollbar 进行修改,滚动条会占位,滚动条样式会在 ie 和 firefox 中失效

datepicker 组件

  • Datepicker.RangePicker
    • 暂时不支持手动更改值
    • 暂时不支持picker=timeshowTime属性

常见问题

antd FAQ

form 表单校验错误提示没有实时同步国际化?

官方 issue

form 表单错误提示的中英文切换需要在项目代码中额外添加

useEff(() => {
  FormInstance.validateFields;
}, [i18n.local]);

Keywords

FAQs

Package last updated on 19 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc