首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ant Design 4.0 发布,来看看如何升级?

DatePicker 重写 提供 picker 属性用于选择器切换。 范围选择现在可以单独选择开始和结束时间。 onPanelChange 在面板变化时也会触发。...对于无法自动修改的部分,codemod 会在命令行进行提示,建议按提示手动修改。修改后可以反复运行上述命令进行检查。 ? 注意 codemod 不能涵盖所有场景,建议还是要按不兼容的变化逐条排查。...迁移工具修改详情 @ant-design/codemod-v4 会帮你迁移到 antd v4, 废弃的组件则通过 @ant-design/compatible 保持运行, 一般来说你无需手动迁移。...用新的 @ant-design/icons 替换字符串类型的 icon 属性 import { Avatar, Button, Result } from 'antd'; + import { QuestionOutlined...更多内容请查看官方文档:https://ant.design/docs/react/migration-v4-cn

5.9K10
您找到你想要的搜索结果了吗?
是的
没有找到

package.json 知多少?

": ">=16.0.0", "react-dom": ">=16.0.0" } 当你正在开发一个系统,使用了 ant-design ,所以也肯定需要依赖 React。...同时, ant-design 也是需要依赖 React 的,它要保持稳定运行所需要的 React 版本是16.0.0,而你开发时依赖的 React 版本是 15.x: 这时,ant-design 要使用...软件协议可分为开源和商业两类,对于商业协议,或者叫法律声明、许可协议,每个软件会有自己的一套行文,由软件作者或专门律师撰写,对于大多数人来说不必自己花时间和精力去写繁长的许可协议,选择一份广为流传的开源协议就是个不错的选择...命令行工具入口 当你的模块是一个命令行工具时,你需要为命令行工具指定一个入口,即指定你的命令名称和本地可指定文件的对应关系。...{ "config" : { "port" : "8080" } } 发布配置 preferGlobal 如果你的 node.js 模块主要用于安装到全局的命令行工具,那么该设置为 true ,

1.8K10

掌握使用 ReactAnt Design 的个人博客艺术之美

在这个互联网浪潮中,选择使用 ReactAnt Design库,为你的个人博客赋予了更为华丽而现代的外观。...在React的海洋中起航首先,我们选择了使用 Create React App 工具,这是一个快速初始化 React 项目的强大工具。...安装 Create React App使用 Create React App 工具可以快速初始化一个React项目。...在你的 React 组件中引入 Ant Design 组件。你可以从 Ant Design 的文档中选择适合你博客风格的组件,比如 Menu、Card、Typography 等。...美化与样式定制Ant Design 提供了一套丰富的主题和样式定制工具。通过这些工具,你可以根据个人喜好调整博客的颜色、字体、边距等样式属性。这不仅让博客更符合你的审美观,也展现了个性化的博客风格。

20810

类型即正义:TypeScript 从入门到实践(序章)

确保你有一定的命令行使用基础,包括使用 Npm (Node.js 包管理工具)来安装包。...,就会提示已经初始化完成,并提供了对于的命令来帮助你开启项目,我们根据提示输入如下命令来开启项目: $ cd typescript-tea $ npm start 运行如上命令之后,会自动开启 Webpack...成功创建一个 TypeScript 版本的 React 应用! 提示在下文中,为了简化语言,我们统一称 TypeScript 为 TS。...提示Ant Design [19]是蚂蚁金服孵化的一套企业级产品设计体系,提供了完备的 TS 类型定义,使得我们可以很方便的在 TS 项目中使用,在最近发布了 4.0 版本,致力于创造高效愉悦的工作体验...Mobile[21] 开箱即用的中台前端/设计解决方案:Ant Design Pro[22] 插画设计:海兔[23] 一款为设计者提升工作效率的 Sketch 工具集 :Kitchen[24] 后面图雀社区计划围绕

1.5K20

Ant Design』主题定制

二、主题定制 打开官方文档,官方文档地址:https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单,点击进入,可以看到如下内容: Ant...方式三(通过 craco,推荐) 官方文档:https://4x.ant.design/docs/react/use-with-create-react-app-cn 第三种方式在 create-react-app...Button> + - ); 这里的 theme 属性就是用来配置主题的,token 属性就是用来配置主题色的,colorPrimary 就是主题色的,...再来一个,我将 Link Button 也改为绿色,这个好像是文字颜色,再去官方文档找找有没有更改文字颜色的 Token 名称,然后我在文档中搜索了一下没有找到,我利用猜想加编辑工具提示找到了我想要的...Token 名称: 我输入了 link,然后编辑器就提示了一堆出来我发现有一个 colorLink,我猜测这个就是用来配置 Link Button 文字颜色的,然后我将 Link Button 文字颜色改为绿色

35250

如何优雅地覆盖组件库样式?

定位要覆盖的样式 首先用开发者工具定位对应的样式:.ant-picker-calendar-date-today... 可以看到,原本的CSS选择器和HTML元素类名都从myWrapper变成了demo_myWrapper__Hd9Qg,前面加上了文件名,后面加上了哈希,这样就能保障样式只在当前这个文件下生效了...但是在这种样式隔离情况下,我们原本用作覆盖的CSS也被加上了哈希,就像下图这样,这时没有办法选中UI组件,覆盖也就不会成功。 所以,React给我们提供了一个语法:global。...使用很简单,把要“渗透“进组件内部的样式前面加上>>>,作用域内的CSS样式都不会带上哈希作为属性选择器。...相较于React的:global,Vue的深度作用选择器是一种更优秀的方案,它必须要一个前导(也就是上面例子中的.myWrapper选择器),前导依旧会被打上哈希作为属性选择器,要渗透进去的样式实际上是作为它的子选择

2.4K10

Nest + Sharp 实现了一个 gif 压缩工具,帮我省不少钱

比如这样一个图片: 在编辑器上传会提示超过 10 M 了: 这时候就需要 GIF 压缩,不然文章发不了。...于是我在百度搜素 GIF 压缩,就找到了一个工具: 它确实能解决我的问题: 但是要花钱: 一年 148 呢,对一个小工具来说还是挺贵的。 但没办法,这对我是刚需,总不能不发文章了吧。...然后我们来写下上传文件的 UI: import React from 'react'; import { InboxOutlined } from '@ant-design/icons'; import..., { useState } from 'react'; import { InboxOutlined } from '@ant-design/icons'; import { message, Upload...在点击登录的时候打印下表单的和 filePath。 我们试试看: 3 个参数都拿到了,然后调用下压缩接口。

25520

7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐

更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。...Ant Design of React 上手文档 | 阿里 Ant Design of React Github Antd of React 是基于 Ant Design 设计体系的 React UI...Ant Design 作为一门设计语言已经经历了多年的迭代和积累,它对 UI 的设计思想已经成为一套标准,也是 React 开发者手中的神器,大幅提高了产品设计研发的效率及质量,Ant Design 文档简洁清晰...Antd of React 是国内 React 项目的首选组件库。 当然,Ant Design 也帮大家造好了轮子,Ant Design Pro(React admin 后台管理框架)请享用。...Element 优秀的方面是常用组件写的非常扎实,比如日期时间选择器、树形组件、日历组件等,这些我们自己写太费劲了,引入第三方库又麻烦,如果选择的 UI 库写的很不错,节省非常多的时间。

5K40

7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐

更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。...Ant Design Mobile of React - 阿里前端 UI 库,面向企业级中后台 [02-Ant-Design-Mobile-React] Ant Design Mobile 上手文档 |...Ant Design Mobile Github Antd Design Mobile of React 是基于 Ant Design 设计体系的 React 移动端组件库,主要用于研发企业级中后台产品...TDesign React Mobile - 腾讯 UI 组件库,配套工具完满,设计工整,文档清晰 [03-TDesign-React-Mobile] TDesign React 上手文档 | TDesign...还提供了辅助设计工具及设计资源,大家常用的设计工具都能找到对应的设计物料。流程规范,使用清晰,强烈推荐。 4.

11K21

Ant Design Table组件报错,提示table should have a unique `key` prop的解决办法

在使用Ant Design for React对接数据时发现控制台报错如下: Warning: [antd: Table] Each record in dataSource of table should...have a unique `key` prop, or set `rowKey` of Table to an unique primary key, see https://u.ant.design...Ant Design Table组件的数据源必须用 "key" 属性吗? 其实不是必须的,我们在使用中会发现 "key" 是 mysql 的保留字段,很不方便。...可以通过下面的方法解决: 可以给你的数据定一个 dataIndex 之类的,最后会赋值到 react 的元素 key 上: rowKey : record => record.dataIndex, 或者...声明:本文由w3h5原创,转载请注明出处:《Ant Design Table组件报错,提示table should have a unique `key` prop的解决办法》 https://www.w3h5

14.8K30

ant-simple-pro2.0正式发布,助力vue3社区

ant-simple-pro 提供了一套开箱即用的后台管理模版, 使得我们可以快速搭建后台管理项目, 并且对Vue3, React, Angular都有对应版本的支持, 我们可以应用于任何框架的管理系统中...此次的版本更新,react版本难度不大,难的是vue版本,因为react对应的插件和第三方库,vue3.0有的没有,哎,其实也不是没有,是完全没有,因此开启了我们造轮子的想法。...温馨提示:如下代码片段只是演示,并不是完整的,完整的请查看ant-simple-pro。...的源码思想,用vue3+ts写的一款颜色选择器组件,完全支持vue3,ts,我们对外暴露了SketchPicker,SwatchesPicker等组件选择器,api和组件选择器,更react-color...项目地址:https://github.com/lgf196/ant-simple-pro 文档地址:ant-simple-pro-document 温馨提示ant-simple-pro-document

1.1K10

React 中后台系统多页签实现

使用社区的轮子,当时选了GitHub 里的两个产品:React Keeper 和 react-router-cache-route 其实每种方案都存在一些问题,最终的选择是使用了排除法。...最终同事选择react-router-cache-route,但在当时在项目尝试集成的时候,直接就报个错,给了我同事当头一棒,详见这个 Issue。...react-router-cache-route (推荐) React Activation (和上面的工具同一个作者,Vue 中功能在 React 中的实现,配合 babel 预编译实现更稳定的 KeepAlive...,Antd多标签页后台管理模板) react-live-route (207 star,也是一种缓存路由的轮子) React Ant (232 star,基于Ant Design Pro 2.0 的多标签页...tabs) Ant Design Pro Plus ( 88 star,基于 ant-design-pro 做一些微小的工作) React Admin (83 star,基于 Ant Design React

3.1K20

前端自动化测试

前言 本文主要是介绍基于React+Ant Design(以下用Antd表示Ant Design)的项目,在对于自己封装的,或者基于Antd封装的公共组件的自动化测试技术的选型和实践。...React项目测试选型 react-addons-test-utils:官方API,有些晦涩 Enzyme:源自Airbnb,封装了React官方测试API,类Jquery风格简洁的API, 使得Dom...render: 渲染出最终的html,然后利用这个html结构来进行分析处理 一些被渲染的组件检索节点的方法: find: 通过匹配选择器来检索节点 some: 当至少有一个节点匹配选择器是返回true...').getDOMNode().value).toBe('2018'); }); }); 这里定义了3个测试内容 测试默认,即检查输入框的是否为默认 测试清除按钮是否可用,通过模拟点击清除按钮...,测试是否能按照预期清除输入框内填充的默认 测试设置,点击输入框,弹出选择框,选择,检查输入框中的是否为选择

1.9K20

基于开源大数据调度系统Taier的Web前端架构选型及技术实践

三个插件,在 UI 组件库中引入 Molecule 和 Ant Design,辅以 esbuild 作为编译打包的工具,最后的产物是 HTML 和 JavaScript。...1、前端脚手架选型介绍 在前端众多的脚手架、框架中我们选择了 UmiJS 作为我们的底层脚手架,之所以选择 UmiJS 的原因,主要是基于以下几点的考虑: 上手成本低,启动项目快 较少的配置需求...,需要快速搭建页面 需要整合 Ant Design 有团队维护,后续开发有保障 2、UI 组件库选型介绍 在 UI 组件库的选择上,除了引入 Ant Design 外,我们还引入了 Molecule...在前端大部分的状态管理工具中,都有一个 connect 就是一个 HOC。在 Taier 中,我们同样也基于 HOC 去实现 Service 和 React 的联系。...目前 Taier 项目的稳定性还不够,更稳定是我们一直追求的目标,未来我们要做到: 提升测试覆盖率,确保稳定性 优化错误提示信息,以确保发生错误后可以通过错误排查问题 支持埋点平台或其他监控平台接入

50110
领券