要实现一个功能,选择汇总时自动取消中心,选则中心,自动取消汇总,中心是可以多选的。
今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group,最开始用的是响应式表单的验证+响应式表单的验证,结果总是无法达到预期效果。
和大家分享一个好消息:支付宝小程序官方 UI 组件库正式加入 Ant Design 大家庭啦!
简单查阅 ant design pro的文档后,可以发现他是有一个多选的属性 rowSelection所以我们就先用这个进行实验
20多天前,遇到一个日程表的业务需求,可以动态增加列、对单元格进行合并,结合公司的jsp项目的已有功能完成单元格的增、删、改操作。进行需求分析整理后,经过了一番查找,发现React版本的antd的表格组件功能很强大,可定制程度很高,可以助我完成这个业务需求的开发。
最近看了一些 Ant Design 的组件源码,学到一些很实用的技巧,这篇文章来分享一下。
曾经,我每次面试时几乎都会问一个问题:antd 中的 Input 组件是受控组件还是非受控组件?
在前面的一文理解Redux中,已经知道了Redux的工作流程以及Redux的设计基本原则,它就是一个用于管理组件的公共数据状态的数据层框架,包括了Store,Reducer,React Component,Actions Creators四个部分
至今为止,关于React中的组件已经接触到了有很多,用类class声明的组件,函数式funtion关键字声明的组件,以及样式组件(styled-components),对于前面几节当中已经用Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的
规则1:不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层调用他们。规则2:只能在函数组件或者自定义hook中使用hook函数。
Context是个好东西,先不论代数效应之类纯理论的概念,能在组件树上无视深度地透传状态确实能给开发带来很大的便利。
用一个 div,设置 width、height 还有上下左右不同的 border-width。
Ant Design Form 组件的 onFinish 方法无法获取 Checkbox 多选和 Radio 单选的值,代码:
技术团队中,保持技术分享和持续的学习是完全必要的。企业主会说:"公司不是培训机构。"这固然正确。但一个公司,总会遇到这种或那种需要攻关的难题。当你不愿意分享解决方案,或者身边的同事既不愿意学习,也不接受新的东西,反而一而再再而三糊弄。那团队怎么配合?
写 react 项目的小伙伴应该都用过 antd 组件库,但绝大多数同学并没有看过它的源码。
这是 antd-mobile 中的 IndexBar[1] 组件,它由两部分组成,一部分是主体,是一个带分组的列表(List),另外一部分是一个在右侧悬浮的索引条(Sidebar)。如果说要找出这个组件中逻辑最难的部分,你觉得会是哪里呢?可能很多人都会觉得是手势和滚动逻辑,当然,这块确实可能需要一点小技巧,不过在这篇文章中,我们来分析另一个隐藏的难点:索引项的生成和在 Sidebar 中的渲染。IndexBar 在实际项目中的用法是这样的:
Ant-Design-Vue升级到2.x以上的版本之后,自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。
近些年随着网络和终端设备的性能提高,前端技术的发展与完善,各类纷繁复杂的单页 Web 应用(SPA)相继出现,Web 被赋予越来越重要的使命。配合 React 等 Web 框架,可以迅速地开发出功能强大的 SPA。不过,随着应用功能的迭代与体积的增加,Web 应用的性能对用户体验的影响也会日益凸显,因此,针对性的性能优化手段在 Web 开发中是必不可少的。
袋鼠云数栈从 2016 年发布第⼀个版本开始,就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想,坚定不移地⾛国产化信创路线,不断推进产品功能迭代、技术创新、服务细化和性能升级。
背景: 在<TextArea>的onChange方法中使用setState来保存value的话,会导致输入卡顿,原因是用户在输入时,一直在setState,导致整个页面一直重新渲染
刚刚发现一个有趣的组件库,官方介绍是为了构建 AIGC 网页应用而生的组件库。这不~就赶紧和大家一起分享!
本文参考了慕课网jokcy老师的React16.8+Next.js+Koa2开发Github全栈项目,也算是做个笔记吧。
用户需要批量修改 Product中 sku 的 映射关系,可以选择的 Product 的 数量不限。
Antd是一个UI组件库, 与React非常搭 善用UI库, 可以节省写css样式的时间 如果我们把写css的时间压缩一大半, 或许就可以早点下班了~ 关于Antd Antd官网 Antd Gith
我们现在的项目统一用 yarn 进行包管理,之前有一个旧项目之前使用的是 npm 进行管理。于是我决定切换一下。
在上篇文章,我们已经设计了一个简单的设计态的Canvas,能够显示经过BuildEngine生成的ReactNode进行渲染。本文,我们将继续上一篇文章的成果,设计并实现一个能够显示组件节点大纲树的组件。
新公司所有的项目基本上都是使用 react 进行开发,之前的工程师是自己使用 webpack 搭建的项目,因为涉及到的东西不多,而且存在一些问题,已经启用。同时因为项目时间原因没有太多时间自己搭建,而且自己较懒,所以选择了使用 create-react-app 进行项目的开发。
本文是笔者写组件设计的第十篇文章, 今天带大家实现一个比较特殊的组件——通知提醒框(Notification)。 该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样,通过引入组件标签来调用。比如Modal组件,我们一般这样来调用:
Node.js设置跨域 app.use('*', function (req, res, next) { // 设置请求头为允许跨域 res.header("Access-Control-Allow-Origin", "*"); // 设置服务器支持的所有头信息字段 res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requeste
各位使用 react 技术栈的小伙伴都不可避免的接触过redux + react-redux的这套组合,众所周知 redux 是一个非常精简的库,它和 react 是没有做任何结合的,甚至可以在 vue 项目中使用。
在此对webpack的性能优化进行几点声明: 在部分极度复杂的环境下,需要双package.json文件,即实行三次打包 在代码分割时,低于18K的文件没必要单独打包成一个chunk,http请求次数过多反而影响性能 prerender和PWA互斥,这个问题暂时没有解决 babel缓存编译缓存的是索引,即hash值,非常吃内存,每次开发完记得清理内存 babel-polyfill按需加载在某些非常复杂的场景下比较适合 prefetch,preload对首屏优化提升是明显 代码分割不管什么技术栈,一
由于本人对前端领域非常感兴趣,接触到前端的时间也比较早,所以平时会用前端技术做一些有趣的东西,包括H5游戏,一些简单框架的封装,脚手架的设计等等,在我之前的文章中也有比较详细的介绍。最近由于希望对node服务端技术,vue,react hooks这些技术实践做一次总结,也希望自己能做出一些比较实用的项目,把它开源出来可以一起完善,优化,迭代。
最近在用 antd v4 的 Tree 组件时,想给 Tree 组件添加一个右键菜单功能,最初的想法是看看 antd 官方有没有提供现成的方法,遗憾的是,官方并没有给出一个统一的方法,只是建议大家先使用社区提供的组件,无奈,只能自己尝试实现一下此功能。
form 本身就是一个可以输出对象的组件,只需要把它的接口改造成 value/onChange 即可。
对于 ToB 业务而言,随着业务的不断壮大,接入的客户逐渐增加,相同页面的差异化的需求越来越多,尤其是在表单层面,小到多一个字段少一个字段这种简单的需求,大到整个页面不变的只剩下一些基础字段。
本系统是博客+论坛于一体的系统。支持用户注册,写博客与发帖子。 采用的技术栈也简单,前后端都是 JS, 数据库只有 mysql。 Nodejs+ nextjs + reactjs + koajs + ant-design 采用接口与客户端分离开发,前台页面服务端渲染,jwt方式授权登录,方便开发多个客户端
根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio
写react和传统的js差不多。只是有一个设计思想贯穿了整个框架。用一个公式来表达就是:
本文主要是介绍基于React+Ant Design(以下用Antd表示Ant Design)的项目,在对于自己封装的,或者基于Antd封装的公共组件的自动化测试技术的选型和实践。
前台渲染-SPA应用是一个主要阵营,如果说有什么缺点,那就是SEO不好。因为默认的HTML文档只包含一个根节点,实质内容由JS渲染。并且,首屏渲染时间受JS大小和网络延迟的影响较大,因此,某些强SEO的项目,或者首屏渲染要求较高的项目,会采用服务端渲染SSR。
Ant Design 的 Icon,是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系;
最近参与了一个历时4-5年的项目,项目是一个后台管理系统,访问量并不高,但经常根据业务方的一些特殊需求,在原有代码添加功能。项目所采用的技术架构还十分老旧,后台采用Struts + Spring + Hibernate, 前台直接使用JSP, 辅以struts与jstl的一些标签。 说实话,自从接受前端MVVM模式后,很久不再使用原始的JSP做前端了,实在是不习惯JSP这种杂乱无章的书写模式。 但项目目前还有线上跑着,维护工作还得继续,同时小组长还告诉我在未完全了解全部业务之前,千万不要尝试进行大面积重构。
最近参与了一个历时4-5年的项目,项目是一个后台管理系统,访问量并不高,但经常根据业务方的一些特殊需求,在原有代码添加功能。项目所采用的技术架构还十分老旧,后台采用Struts + Spring + Hibernate, 前台直接使用JSP, 辅以struts与jstl的一些标签。
PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源。
用 Form.Item 包裹 Input、Checkbox 等表单项,可以定义 rules,也就是每个表单项的校验规则。
昨天介绍这个antd表格的试用,我们先看了官方的示例,然后直接使用vben admin提供的表格看一下:
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下:
领取专属 10元无门槛券
手把手带您无忧上云