Ant Design 4.0 正式版来了 引言 我们在 SEE Conf 之际发布了 4.0 rc 版本。经过 1 个多月的反馈收集和调整之后，我们终于迎来了 4.0 的正式版！...设计规范升级 我们将基础圆角由 4px 调整为 2px。中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。...更小的尺寸 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？[3]）。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。...你现在可以单独的选择开始或结束时间，并且完美优化了手动输入日期的体验。 ?
在 3.x 版本中，Icon 会全量引入所有 svg 图标文件，增加了打包产物； 在 4.x 版本中，对 Icon 进行了按需加载，将每个 svg 封装成一个组件。...这里稍微注意一下，请勿在设置 shouldUpdate 的外层 Form. Item 上添加 name， 否则，你会得到一个 error。... Form.Item> )} Form.Item> 在使用 shouldUpdate 的时候，需要在第一个 Form.Item 上加上 noStyle，否则就会出现下面这种留白占位的情况...● extra 针对于想放置于组件下面内容可以使用 extra 来实现。...Drawer 当我们在 Drawer 上 设置了 getContainer={false} 属性之后，Drawer 会添加上 .ant-drawer-inline 的类名导致我们 position: fixed
这里实现的留言功能，参考微信朋友圈的方式： 用户发送一个TOPIC话题，读者可以在该话题下面进行评论，也可以对该话题下的留言进行评论。但是始终只会展示两层树的评论。...前端实现 使用技术 react ant design typescript 在上面的截图中，很明显，就是一个表单的设计，外加一个列表的展示。...表单的设计使用了ant design框架自带的form组件： <Form {...layout} form={form} name="basic" onFinish={onFinish}...> 这里限制了输入的主题名称的长度为6-30；内容是30-300字符 针对留言的展示，这里使用的是ant design自带的List和Comment组件： <List loading...进程守卫 apidoc 用来生成接口文档（如果你留意体验站点，右上角有一个"文档"的链接，链接的内容就是生成的文档内容） 这里的搭建就不进行介绍了，可以参考koa2官网配合百度解决~ 其实，本质上还是增删改查的操作
我们先看看实现的效果： 设计的初衷： 1. 简洁清爽 2. 重点突出 整个页面使用了一个渐变的背景色(这里直接使用了图片)，重要的内容居中显示，条款等内容右下角小字展示；整个站点以拂晓蓝色调为主。...整个项目因为使用的是react ant design这种成熟的框架，所以几乎不需要自己额外写很多的样式。 具体的框架结构不在本文涉及。...label="账号" name="username" rules={[{ required: true, message: '请输入...label="密码" name="password" rules={[{ required: true, message: '请输入!'...下图更能体现这种效果： image.png 这些显著的特点使用户能更好的建立界面的深度和层次感。因为它玻璃状的外观，业内称之为毛玻璃效果（glassmorphism）。
首先点击发布按钮之后打卡抽屉，在抽屉中分别录入了文章分类、收录至专栏、文章封面、文章摘要等。都录入完毕之后点击底下的确认并发布才真的发布了文章。...最后我会把上一篇和这一篇的代码都放到后面。...> Upload 这里用到了上传文件Upload组件，这个我在另一篇文章中讲到过 ✈️ 上传文件先提交到后端，提交到后端之后会返回给我们一个图片路径。...当imageUrl没有值的时候渲染图标，当是加在的时候渲染loading图标，当是添加的时候渲染PlusOutlined图标 Form.Item label="文章封面">.../type'; import { TagsFilled, LoadingOutlined, PlusOutlined } from '@ant-design/icons'; /** * 组件外声明只加载一次
大家写中后台系统的时候，应该都用过 Ant Design 的 Form 组件： 用 Form.Item 包裹 Input、Checkbox 等表单项，可以定义 rules，也就是每个表单项的校验规则。...而 ref 的值保存在 current 属性上，修改它不会触发重新渲染。 errors、validator 这种就是不需要触发重新渲染的数据。...比如这种就不需要包装： 创建两个 state，分别存储表单值 value 和 error。...message: '请输入密码!'...: true, message: '请输入密码!'
DatePicker 交互重做，面板和输入框分离，范围选择现可单独选择开始和结束时间。 Table 默认背景颜色从透明修改为白色。 Tabs 火柴棍样式缩短为和文字等长。...图标升级 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。...范围选择现在可以单独选择开始和结束时间。 onPanelChange 在面板值变化时也会触发。...如果你在升级过程中遇到了问题，请到 GitHub issues 和 codemod Issues 进行反馈。我们会尽快响应和相应改进这篇文档。
，在每个Form.Item中定义forceUpdate()强制更新函数，当我们setValue值得时候，根据name值判断出要更新的Form.Item,可以调用该Item的更新函数更新，相比ant3节约了性能...（个人觉得这个思想类似Vue了，涉嫌抄袭） ant4简单原理展示 基本用法,拷贝整理下可测试 //FormPage页面 函数组件和类组件略有差异，类组件会用到神奇的React.forwardRef...组件不能直接传递ref key 等属性, 会被react使用并拦截,这要用到React.forwardRef api, 把当前ref暴露给子组件,在Form...FormItem组件 register = (item) => { this.formItems.push(item) // 有注册有取消，返回一个取消注册方法在组件...{ const { props, getFieldDecorator, validateFields } = this; // form上暴露
当把 colours 设置为 2，图片就变成这样了： 图片也更小了一些： 具体怎么设置压缩级别和颜色数量，还是看需求。...不过体验上还是网页更好一点，我们也来写个这种网页： 用 create-react-app 创建个项目： npx create-react-app gif-compression-frontend 进入项目目录...然后我们改下前端代码的上传接口： 测试下上传： 提示文件上传成功了，然后在服务端控制台也打印了文件信息，并且在 uploads 目录下可以看到这个文件： 这些文件在浏览器打开，可以看到就是上传的...在点击登录的时候打印下表单的值和 filePath。 我们试试看： 3 个参数都拿到了，然后调用下压缩接口。...和用这个网站压缩的差不多： 更重要的是不用每年 138 的会员费，还可以自己修改参数。
{ Button, Col, Form, Input, Row } from "antd"; import { MinusCircleOutlined, PlusOutlined } from "@ant-design...如图 自定义表单组件，在 Form.Item 组件下使用。 Form.Item子节点的props接收两个参数：value,onChange。...props 类型 描述 value any 表单对应的Form.Item上name的值。 onChange function 修改表单属性值。...onClick={submit}> submit ); } 若需要使用表单验证自定义组件的值，在Form.Item...上添加rules，使用validator函数来自定义校验规则。
在移动设备上，网页通常需要适应不同的屏幕大小和分辨率。那么，在这种情况下，网页应该如何表现呢？viewport 元素就是来解决这个问题的。...这个设置对于确保在移动设备上展示的网页可以正确响应用户的手势操作非常重要。...在没有移动端的设计稿时，不失为一种防止在移动端上布局样式崩溃的方法。 如果没有设置宽度，元素的默认宽度是100%。这意味着元素会填充其父元素的整个宽度。...Connect 中间件框架，通过在开发服务器上设置代理服务器，将请求转发到另一个服务器上。...开发环境与生产环境不同：在开发环境中，前端页面通常运行在本地的开发服务器上，而后端服务则运行在远程服务器上。
提示Ant Design [19]是蚂蚁金服孵化的一套企业级产品设计体系，提供了完备的 TS 类型定义，使得我们可以很方便的在 TS 项目中使用，在最近发布了 4.0 版本，致力于创造高效愉悦的工作体验...Mobile[21] 开箱即用的中台前端/设计解决方案：Ant Design Pro[22] 插画设计：海兔[23] 一款为设计者提升工作效率的 Sketch 工具集 ：Kitchen[24] 后面图雀社区计划围绕...Ant Design 生态撰写一系列教程，帮助大家提高设计、开发效率，敬请期待！...✌️ 安装依赖 好了，大致介绍了 antd 组件库及 Ant Design 周边之后，我们马上来写代码引入 antd，打开命令行，在其中输入如下命令： $ npm install antd 运行上面的命令安装完依赖之后就可以在项目中使用了...准备样式部分 准备了逻辑代码之后，为了让我们最后的待办事项在样式上更美观一点，也利于我们讲解时的操作，我们需要给项目加一点样式，打开 src/App.css 对其中的代码做出对应的修改如下： .App
入职前端工作到现在差不多有一年半的时间了，和朋友偶然聊天的时候被问到，能不能用所学的前端知识做一个家族关系的族谱，可以使家族关系更加简单明了。...解决技术困难 当时阻碍我前进的就是如何实现族谱的连线以及根据数据渲染它们的对应关系，后来在逛博客的过程中，发现了antdesign的charts图表组件。...开始动手 首先需要安装ant-design/charts，具体安装过程请参考官方文档。.../Treechart.css"; import { Modal } from "antd"; import { OrganizationGraph } from "@ant-design...label="姓名" name={ "name"} required> 输入姓名" /> Form.Item
嗨，大家好，我是徐小夕，之前和大家分享了很多可视化低代码的最佳实践，今天和大家分享一下我基于实际场景开发的小工具——BubbleMap。...我在实现气泡图谱工具的时候就是采用的这种方案。...嵌套表单代码案例如下： import React from 'react'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design...API来渲染出气泡图谱的动画效果和样式，即可。...最后实现的效果如下： image.png 效果演示 在实现好这个小工具之后，我来带大家演示一下： 我们可以在右侧编辑修改数据，点击生成即可更新图谱。
---- 抽离思路及实现 思路 合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定...,设置默认值等); 为了降低复杂度,子组件不考虑dva来维护状态,纯靠props和state构建,然后统一把构建的表单数据向父级暴露.....submit"> 下载报表 复制代码 数据源格式 data的数据格式基本和antd...{ border-radius: 6px; } .ant-advanced-search-form .ant-form-item { display: flex; flex-wrap:...wrap; } .ant-advanced-search-form .ant-form-item-control-wrapper { flex: 1; } 复制代码 ---- 总结 温馨提示 没用
组件 Schema 如何设计？ 画布区域和预览时组件的渲染是否可共用一套渲染逻辑？...组件 Schema 设计 这里涉及到组件、画布和属性区域三块的联动。主要包含组件强相关的表单属性以及初始值。... ); })} ); }; 表单区域具体表单项发生改变后就会触发onValuesChange，也就是ant...从页面呈现上来看并没有太大的差异，那么从代码设计上，这两部分当然就可以共享一个组件。...在low code和no code出现之前，这种方式是最为普遍的研发方式。 在上面的流程图中，这部分并没有体现。但是在实际的业务开发中，这种场景却是经常存在的。
> Form.Item> 其实就是Form.Item里面套一个Input.group 然后再套Form.item...就可以了，验证独自给form.item加上rules即可 参考文档：https://ant.design/components/form-cn/#header 4.重置antd-form 创建一个ref... const formRef: any = React.createRef() 挂载到form上（我的组件是通过子组件传值过去的） 传递给子组件 <RequestForm formRef={formRef...unclick: 图片 click: 图片 非常简单，想复杂了 11.antd-form 自定义校验 需求就是我们的验证码组件需要校验 可以用到form的自定义检验(就是拿到form的value和验证码...transition: width 0.5s ease; } a:hover:after { width: 100%; } 13.使用useMediaQuery来判断pc和mobile
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。...贴纸是可以发送或放置在消息，照片和其他贴纸上以增强重点并传达情感的图像或动画。 ? 为表达而设计。人们使用贴纸在视觉上传达情绪和反应。努力提供贴近人们情感的贴纸。...测试放置的可能性。用户可以缩放，旋转和在对话的各个部分上放置贴纸。确保您的贴纸清晰可见，无论其位置或大小如何，其颜色和图像均不同。 考虑使用鲜艳的色彩和透明度。鲜艳的色彩为对话增添了丰富感和兴奋感。...iMessage应用程序和贴纸包图标 像iOS应用一样，iMessage应用和贴纸包也需要可识别的应用图标。保持背景简单，并提供单个焦点。设计一个带有单个中心点的图标，一目了然。...将模板图像用作操作扩展图标。模板图像使用遮罩创建图标。使用具有适当透明度和抗锯齿的黑色和白色，并且不要包含阴影。模板图片应居中放置在大约70px×70px的区域中。
有段时间没有和大家见面了，最近因为有一些比较重要的事情（陪女朋友和换了新公司）在忙碌所以销声匿迹了一小段时间， 后续会陆陆续续补充之前构建 & 编译系列中缺失的部分，提前预祝大伙儿圣诞节快乐！...受控 在 HTML 中，表单元素（如、 和 ）通常自己维护 state，并根据用户输入进行更新。...之后当用户在页面上的 input 元素中输入任何值表单值都会跟随用户输入而实时变化而并不受任何组件状态的控制，这就被称为非受控组件。...重要区分点 上边我们聊到了 React 中的受控和非受控的概念，在 React 中区分受控组件和非受控组件有一个最重要的 point 。...类似 Ant-Design 中的 Input 组件。它既接收显示传入 value 和 onChange 的组合方式，同时也支持传入 defaultValue 的非受控方式实现。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
