1.前端学习——Ant Design
2.AntDesign Axure原型组件是源码免费开源的,再也不要去某鱼、源码某宝买了!源码!源码!源码
3.antd的源码无间狱源码config-overrides.js组合配置问题
4.实例-0antd design pro V5 [4] 样式和主题
5.Vue版本的Ant Design移动端组件库来啦
前端学习——Ant Design
本文基于Ant Design官网内容进行编写,旨在简要介绍个人认为需要了解的源码部分。若想了解更多详细信息,源码请查阅官方文档。源码 Antd,源码全称为Ant Design,源码是源码蚂蚁集团推出的企业级产品设计体系。它的源码设计理念围绕「自然」、「确定性」、源码「意义感」、源码「生长性」四大核心价值观,通过模块化的解决方案,旨在降低开发成本,让设计者专注于提升用户体验。 Antd的云SIM源码安装可以通过yarn或npm命令轻松完成。 Antd的使用涉及到引入组件,包括按钮、图标、文本样式、栅格系统等,为开发者提供了一套完整的组件库。Antd组件详解
Button按钮:Antd提供了丰富的按钮样式和功能,支持自定义大小、颜色、形状等属性。 Icon图标:Antd图标组件提供了一系列语义化的矢量图形,易于集成到按钮或其他组件中,以增强视觉效果和交互体验。 文本样式:Antd提供了一系列文本样式,支持字体大小、颜色、对齐方式等调整,满足不同场景的需求。 Grid栅格:栅格系统是源码编译pytorchAntd布局的核心,基于Flex布局,灵活地定义元素在页面中的位置和大小,支持响应式设计,实现自适应屏幕大小。Grid栅格详细功能
栅格系统提供基础栅格、区块间隔、列偏移、列排序等功能,支持多种排列方式和对齐方式,包括水平对齐、垂直对齐、子元素排列顺序等。 栅格系统支持自定义间隔,推荐使用(+8的倍数)px作为栅格间隔,以实现美观的布局效果。其他组件
Antd还包括Select、Radio、Checkbox、Switch、chorme内核源码Cascader、DatePicker、TimePicker、Input、Tabs、Table、List、Alert、Modal、Form等组件,覆盖了表单、时间选择、输入、列表展示、警告提示、对话框、高级表单管理等场景。 每个组件都设计为高性能、易用的rtthread源码目录解决方案,旨在简化前端开发流程,提高开发效率。 通过学习Antd组件,前端开发者可以构建出结构清晰、功能丰富的应用界面,显著提升用户体验和工作效率。AntDesign Axure原型组件是免费开源的,再也不要去某鱼、某宝买了!!!
Ant Design,由蚂蚁金服体验技术部为推动企业级后台产品设计而开发,旨在提供一套通用的交互语言和视觉体系。其目标是通过标准化设计,减少项目间的差异和前端开发成本,提升设计与开发效率。
特别值得一提的是,Ant Design的Axure原型组件是完全免费且开源的,开发者可以直接获取并应用于项目中,无需支付任何费用。这使得原本可能在淘宝、某鱼等平台被不当销售的资源,现在可以直接从官方获取,避免了不必要的困扰和误解。
令人惊讶的是,竟然有人将这些免费资源在其他平台标价销售,这不仅违背了开源精神,也对用户构成了误导。幸运的是,这些资源的真正价值在于其开源性,用户无需在第三方渠道寻找,直接通过官方途径就能获得。
如果你需要Ant Design的Axure原型组件,无需再花费时间在这些非正规渠道寻找,可以直接访问官方网站下载,享受高效且合法的开发资源。
antd的config-overrides.js组合配置问题
在进行React项目开发时,我遇到了一个关于Ant Design配置的问题。项目中原本的icon元素在引入Ant Design后出现了空白现象,这让我感到疑惑。经过一番排查,我发现这是在引入Ant Design的`config-overrides.js`文件后,导致了原本的icon配置被覆盖。
在未引入Ant Design时,项目的配置文件是这样的:
引入Ant Design后,配置文件出现了变化,这可能是`config-overrides.js`文件中对某些配置进行了调整,导致原本的icon配置失效。
了解到`config-overrides.js`文件会覆盖原有的webpack配置后,我开始思考如何解决这个问题。经过多次尝试,我找到了一个解决方案——将原本额外配置的webpack.config.js内容整合到`config-overrides.js`中。
为了实现这一目标,我将原本的webpack配置记录整理,并将其内容整合进`config-overrides.js`中,以确保不会被覆盖。以下是我整合后的配置源码:
(具体整合后的配置源码)
通过将额外配置的webpack.config.js内容写入`config-overrides.js`中,问题得以解决,最终实现了组合配置成功的目标。
实例-0antd design pro V5 [4] 样式和主题
umi平台内置了less和css解析工具,因此用户可以选择使用这两种工具。尽管两种工具均可使用,但推荐使用less,因为它不仅包含了所有css的特性,还提供了更多的扩展功能。
然而,antd 5版本中已经取消了在antd 4及之前版本中广泛使用的“less+css Module”方案,取而代之的是CSS in JS方案,并提出了“Seed Token+Map Token+ Alias Token三层继承思想”。
如果您需要完成迁移工作,以下文章提供了从cssinjs到less以及从less到cssinjs的转换方法。
在尝试查找@import (reference) '~antd/es/style/themes/index';时,发现antd 4版本中存在此引用,但在antd 5版本中却不见了。
经过两天的深入研究和学习,我了解到antd 5版本支持定制化主题,并能够对单个组件进行细粒度处理。同时,我也对design token有了更深入的理解。这几篇文章对于我的学习之路起到了很好的启蒙作用。
Vue版本的Ant Design移动端组件库来啦
本文介绍一个Vue版本的Ant Design移动端组件库的开发与使用。本人对Ant Design的风格及设计理念情有独钟,但由于公司技术栈为Vue,且官方认可的ant-design-vue库解决了Vue桌面端使用Ant Design的问题,然而移动端组件库(ant-design-mobile)尚未有Vue移植版本。
为填补这一空白,本人在开发公司移动端办公系统的过程中,持续地将antd-mobile的组件进行“翻译”移植至Vue版本。经过数月努力,现已成功移植了约%的组件,涵盖大部分常用组件。
整体来看,组件移植工作难度并不大,未完成移植的组件主要是因为项目中并未使用到,所以缺乏进一步的动力。若读者有其他组件需求,欢迎在文章或GitHub项目页面留言,本人将尽快响应。
GitHub项目地址:[项目链接]
与原antd-mobile组件库相比,本项目目前共移植了个组件,覆盖了原库约%的组件(原库共个组件)。
关于引入方式,非CDN方式仅支持TypeScript。而按需引入则需要借助babel-plugin-import插件,以实现仅引入项目中真正需要的组件,有效减小项目体积。
对于按需加载的配置,可以将babel.config.js文件修改为: