Ant Design 的 Icon，是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系； 注：antd 设计价值观 https://ant.design/docs/spec...图标主题风格（theme） fill（填充型） outline（线框型） twotone（双色型） 2.2. 设计尺寸 画板尺寸： 1024px * 1024px； 出血位：64px； 3....常规用法 直接通过 的 type 和 theme 指定图标。 3.2. 引用 iconfont.cn 中的定制图标 3.3....自行引入 SVG 图标 标签也可以通过 component 引入自定义的 SVG React 组件； 注：svgr 可以完成 svg 文件到 react 组件的转换； 4....用途、目录结构 对外提供 Icon 接口； 整合 icons 和 icons-react，自动将 icons 中的所有 IconDefinition 注册到 icons-react 中，以便可以通过
气泡确认框中图标的使用改变，由问号改为感叹号。 部分组件选中颜色统一改为 @blue-1: #E6F7FF，对应 hover 颜色改为 @gray-2: #FAFAFA。...DatePicker 交互重做，面板和输入框分离，范围选择现可单独选择开始和结束时间。 Table 默认背景颜色从透明修改为白色。 Tabs 火柴棍样式缩短为和文字等长。...图标升级 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。.../compatible 引入的老版本 Form 组件，样式类名会从 .ant-form 变成 .ant-legacy-form，如果你对其进行了样式覆盖，也需要相应修改。
在现代的Web开发中，React已经成为了最受欢迎的前端框架之一。它的组件化设计和强大的虚拟DOM使得开发人员可以轻松地构建复杂的UI界面。...四、什么是Ant DesignAnt Design是一个由阿里巴巴开发的React UI组件库。它提供了许多现代化的UI组件，如按钮、表单、弹出框和数据可视化等。...Ant Design的设计风格非常优雅和简洁，同时还可以提供多语言支持和自定义主题等功能。五、创建React项目现在，我们已经了解了一些常用的React工具和库，可以开始创建一个React项目了。...我们使用了Ant Design的Layout和Menu组件来创建一个漂亮的UI界面。...我们还使用了Ant Design的图标组件来为菜单项添加图标。
设计规范升级 我们将基础圆角由 4px 调整为 2px。中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。...你可以在页面中点击切换主题功能查看暗色主题效果： 64.gif 无边框组件 在业务中，我们发现有些场景会存在轻量级的选择组件。...更小的尺寸 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？[3]）。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。...你现在可以单独的选择开始或结束时间，并且完美优化了手动输入日期的体验。 ?
这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。...NG-ZORRO介绍： 官网地址：https://ng.ant.design/docs/introduce/zh ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular...UI 组件库，主要用于研发企业级中后台产品。...NG-ZORRO特性： 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Angular 组件库，与 Angular 保持同步升级。...启用图标动态加载）：y set up custom theme file（设置自定义主题文件）：y choose your locale code（选择区域设置代码）：ZH-CN choose template
以.js 文件为组件 文件中通过字符串模板定义 html 和 css，然后在自定义元素的构造函数中引入它们。...统一 UI 风格 经过实测，Ant Design 这样基于 React 框架的 UI 库无法按需打包出单独的组件，因此需要针对特定组件进行 CSS 模拟，例如，本仓库中通过调整样式，将第三方表格库渲染成...Ant Design 的风格，后面我会逐一实现其他使用到的 Ant 组件。...：封装 input 实现 字体图标 首先并不一定需要引入外部的图标，因为用户的操作系统和浏览器中已经内置了几十万个 Unicode 图标，几乎可以涵盖所有场景，因此首选方式是从 Unicode 库中搜索可用的字符然后直接拿来用...当然，想要设计自己的图标也可以，页面上所有图标都以字体的形式存储，字体文件通过免费软件例如 FontForge、BirdFont 来打包合成，不用单独存储 svg 图片，图标可以上各大图标素材网站白嫖，
在本文中将介绍在 React 中受控和非受控表单是如何使用的，以及现代化使用 hooks 来管理 form 状态。...使用场景： 对于简单的表单，不需要对用户输入进行验证和处理。 需要获取表单元素的值进行一些简单的操作，如发送请求或更改 URL 等。...state 中，方便访问和操作 非受控组件需要依赖 ref 来获取元素值，并且会受到组件生命周期变更而影响值 验证和实时性 可以实时验证和处理用户输入 不利于实时反映用户输入的值，不方便对用户输入进行验证和处理...到 ant4 的差异为例 antd3 中form 组件设计思想： 使用HOC（高阶组件）包裹 form 表单，HOC 组件中的 state 存储所有的控件 value 值，定义设置值和获取值的方法 存在缺陷...： 由于 HOC 的设计 ,state 存于顶级组件，即便只有一个表单控件 value 值改变，所有的子组件也会因父组件 rerender 而 render,浪费了性能 总结： ant3 时代的 form
Ant Design Vue Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件，应式设计，这些组件几乎适用于所有屏幕分辨率。Vuestic 在整个框架中提供无缝翻译支持和键盘可访问性。...文档网站易于浏览，并具有完整的自定义输入，可帮助开发人员预览组件在他们自己的主题中的外观。可以使用这些选项来创建自己的带有颜色图案和字体的完整主题。...PrimeVUE 拥有 80 多个组件，证明自己是此列表中组件范围最广的框架之一。 组件包括带有仪表、滑块、树、图形、拆分按钮、旋钮、图表等的密码表单。
下面将通过一个实例介绍如何在出口中实现SAP标准程序的增强。 要应用基于函数的出口首先必须先维护一个自定义的CMOD项目对象，输入事务代码CMOD进入项目管理维护工具。...CMOD中输入。...本例就输入之前我们找到的组件对象“V45A0003”，如下图所示： ? 保存所输入的组件对象后，单击维护页面中的“组件”按钮，系统进入到组件列表页面。...该页面中将列出组件所包含的功能函数，如组件对象“V45A0003”包含了“EXIT_SAPMV45A_003”和“EXIT_SAPMV45A_004”两个功能函数，若同时维护了多个组件对象，则会在该页面中将所有的函数对象按顺序列出来...从页面中也可以看到组件对象的状态，在组件所对应的列表表头，会有一个指示图标来标示该对象的状态。组件对象必须激活才能使用，若未激活，将显示一个红色的指示图标，激活后则是一个绿色的图标。
Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件，应式设计，这些组件几乎适用于所有屏幕分辨率。Vuestic 在整个框架中提供无缝翻译支持和键盘可访问性。...文档网站易于浏览，并具有完整的自定义输入，可帮助开发人员预览组件在他们自己的主题中的外观。可以使用这些选项来创建自己的带有颜色图案和字体的完整主题。...PrimeVUE 拥有 80 多个组件，证明自己是此列表中组件范围最广的框架之一。 组件包括带有仪表、滑块、树、图形、拆分按钮、旋钮、图表等的密码表单。
3.组件库 因为 Element UI 长期没更新，并且之前使用过 React 的 Ant Design（重点），所以组件库选择了Ant Design Vue。...覆盖 Ant Design Vue 样式 设计师眼中的 Ant Design === '丑'（心酸）。...干掉无用的图标 Ant Design Vue 把所有的 Icon 一次性引入（不管你因用了多少个组件），这使得体积打包后图标所占的体积竟然有几百 kb 之多。...这些图标大多数不会被设计师所采纳，所以部分图标都应该被干掉： 创建一个 icons.js 来管理 Ant Design Vue 图标，这里以一个 Loading 图标为例： // @/src/assets...自动注册 Svg 图标 在日常的开发中，总是会有着大量的图标需要使用，这里我们直接选择使用 SVG 图标。但是如果每次使用图标还需要通过路径找到这张图标岂不是很麻烦？
本文推荐几个优秀的 Vue UI 库和企业级中后台项目，不多，够我们学习的了。 5 个基于 Vue 的 UI 组件库，帮助你做出更美观的 Vue 应用: 1、Element。...Element 的设计原则是所有的元素和结构需保持一致的风格，比如：设计样式、图标和文本、元素的位置等，同时做好反馈控制，通过界面样式和交互动效让用户可以清晰的感知自己的操作，通过提示组件和友好的图标设计...BootstrapVue 是 Bootstrap 的 Vue 版本，拥有超过 40 个可用的插件，80 多个自定义组件，及 670 多个图标，为 Vue.js 提供了Bootstrap v4 组件和网格系统最全面的实现...ant-design-vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品，是企业级桌面应用程序的 UI 设计系统，拥有一套高品质的Vue 通用组件，和 Ant Design...它使用最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
Ant Design Pro 的布局 在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 layouts 目录中，分别为： BasicLayout：基础页面布局，包含了头部导航.../Dashboard/Workplace' }, ], }, ], }] 映射路由和页面布局（组件）的关系如代码所示，完整映射转换实现可以参看 router.config.js。...icon: 当前路由在菜单下的图标名。 hideInMenu: 当前路由在菜单中不展现，默认 false。 hideChildrenInMenu: 当前路由的子级在菜单中不展现，默认 false。...Ant Design 布局组件# 除了 Pro 里的内建布局以为，在一些页面中需要进行布局，可以使用 Ant Design 目前提供的两套布局组件工具：Layout 和 Grid。...Layout 组件# 如果你需要辅助页面框架级别的布局设计，那么 Layout 则是你最佳的选择，它抽象了大部分框架布局结构，使得只需要填空就可以开发规范专业的页面整体布局，详情参看：Layout。
所以开发通用组件，参数设计是重要的一个环节。如果刚开始不是很擅长设计参数，可以参考Antd的参数设计，Antd的组件丰富且功能强大，所以参数考虑的也很周全。边学边练，效果更佳。...是怎么设计这些组件的。...官网指路☞Ant Design赏析前准备学习第三方组件之前，不能盲目看代码，可能会找不到重点或者被大量的逻辑绕晕。...我一般学习之前先做三方面准备：先明确组件要实现什么功能，比如输入框是否不可操作，是否回显数据等；然后看组件参数，把参数分为控制UI布局、控制内容展示、控制操作功能等几种；比如通过disabled的值控制输入框是否可以操作...自定义图标，参数icon表示步骤图标的类型，当它有值的时候，步骤条会显示成它的值。有两个特殊的图标：成功状态、失败状态，这两个状态的图标如果使用组件时没有进行自定义，会取内部定义的图标。
已 Pro 全区块为例，这两个方法分别出现了 87 和 22次，在我自己的一个维护项目中找到了142 个 getFieldDecorator ，更不用说为了封装组件 getFieldDecorator... 会转化成 LegacyIcon，这里需要检查一下，如果你不是组件库你一定是不需要 LegacyIcon，迁移之后一定要删除它，不然会造成图标文件被全量打入，它可是有...兼容包中 ant-from 类名将会更新为 ant-legacy-form ，如果你修改了 form 的默认样式记得检查一下，并且修改它。...> 如果你想获得迁移到新的版本，可以按照上面的文档描述实现，但是 Pro 中支持通过设置 icon 配置菜单图标，在 4.0 中将无法得到支持，所以我们提供了相应的插件[5]来保留此功能。...由于 4.0 的 icon 有一些删改，如果发现图标消失，请在 antd 官网中寻找合适的进行替换。
2011年，Twitter推出Bootstrap；2015年，Fusion电商中后台组件库发布；2016年，Element中后台组件库发布；2016年，iview中后台组件库发布；2016年，蚂蚁金服Ant...网站：https://www.iviewui.com— 5 —Ant Design2016年蚂蚁金服Ant Design中后台组件库发布。...Ant Design，林林总总有这些能力：2016年，Ant Design1.0发布，包含中后台基础组件库及移动端基础组件库，且配套设计语言；2017年，AntV数据可视化解决方案发布，语雀知识库发布；...设计体系配置平台及智能代码生成功能；拥有图标平台、色彩算法、物料平台等生态产品，全方位助力产品侧设计出体验好的产品。...同时，2021年推出的B端组件库，如ArcoDesgin、SemiDesgin、TDesgin，虽然其样式更美观，生态更健全，也未必会是产品研发团队的首选。
我这里创建了一个全新的 React 项目，可以基于上篇文章创建方式创建，并且自行安装 Ant Design, 其实可以直接将上篇文章的项目拷贝一份改个名字即可： 在之前我们的 App 组件中，我们引入了一个...函数式组件在之前 React 基础系列文章中已经介绍过了，这里就不再赘述了，如果不了解的话可以去看看我之前的文章。...这里采用 ConfigProvider 组件进行主题配置，在 App 组件中引入 ConfigProvider 组件： + import { ConfigProvider } from 'antd';...然后在 App 组件中将 Button 组件放到 ConfigProvider 组件中： const App: React.FC = () => ( - + <ConfigProvider...Design Token 是一种用于描述设计系统的抽象，它是一种设计语言，用于描述设计系统中的设计原子，例如颜色、字体、间距、阴影等。
虽然figma现在已经很流畅了，但是养成下面这些习惯，也会最大限度的减轻系统负担，让设计更丝滑。 01.多页的大文件 将所有内容保存在一个文件中是很诱人的。...原则就是为外部组件库和最终设计稿提供单独的文件。对于复杂的项目，组件库可能会进一步划分为更小的块。如果您与其他设计师合作，您还可以将组件库用作设计沙箱。...我们建议的做法是将所有可能的按钮元素（如图标状态、标签和下划线）塞进一个单独的组件中。然后，此模板的实例嵌套在所有按钮变体中，以便以后编辑。...按钮通常嵌套在许多其他组件中，并且隐藏层被继承。 批量编辑组件 坦率地说，您几乎不需要在第一次定义按钮后对其进行编辑。...占位符允许您创建实例的版本而无需制作其他组件变体 原子设计 组合基本构建块以创建复合结构的想法也有助于减少变体数量和组件大小。 在这里有一个简单的图像示例，当您将鼠标悬停在信息图标上时会显示工具提示。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
