前端页面开发或是现在日渐增多的Hybird APP应用开发中,经常遇到模拟原生APP界面效果不佳情况,固定header、footer便是其中一种。...,header、footer还是会被“带走”,这个情况下,有人建议使用js来阻止body的touch事件,这样由于主要滑动的是.content下面的内容,也不至于整页滑动导致header、footer随滚动而动...,但这么暴力的处理往往是不理想的(可能影响其他功能,且页面功能多时,可能出现js加载延迟,页面初始化完第一次还是可以滚动)。...效果大概是这样的:期望是只有主体部分能够滚动,然而向上滑动向下滑动最近遇到这样的问题,尝试后做了如下小改动,可以零js解决此问题,示例代码如下:<!...,而不会触发整个页面的Bounce效果,尝试多个iOS系统,基本没有什么问题,只是1px的差异,遇到处女座可能有点纠结了。
你可以在页面中点击切换主题功能查看暗色主题效果: 64.gif 无边框组件 在业务中,我们发现有些场景会存在轻量级的选择组件。...是你们为开源的贡献让 Ant Design 变得更加美好!...参考资料 [1] 点击此处: https://ant.design/changelog-cn [2] https://ant.design: https://ant.design [3] 为何使用 svg...: https://github.com/ant-design/ant-design/issues/10353 [4] 此处: https://ant.design/docs/react/replace-moment-cn...://ant.design/changelog-cn [7] 该文档: https://ant.design/docs/react/migration-v4-cn [8] @saeedrahimi: https
1、ant design 弹窗关闭后页面不能滚动! 问题描述: 在使用modal弹窗时候,关闭后导致页面无法滚动,检查后发现是body上设置了样式 overflow:hidden 导致不可滚动。...问题描述: 在ant design-vue中为table设置默认空样式的时候,使用jsx写法,导致报错。
然后打开 Semi Design 的组件文档,可以看到页面比较精简、组件也很丰富。但是左侧组件菜单的小图标给我一种不太舒服的感觉,好像色彩太过丰富了一些。...组件文档 此外,整个文档给我的感觉也是似曾相识,好像和蚂蚁的 React 组件库 Ant Design 神似。 Ant Design 组件库 然而,点击查看一个组件后,我发现了一些小惊喜。...首先是每个组件上方都多了一个 版本对比 的按钮: 有了这个东西,我们可以快速了解每个组件随版本的更新和变化,从而减少一些版本不一致导致的 Bug。...物料市场 总之,整体来说,我还是很看好 Semi Design 的。 杂谈 虽然网上都在说 Semi Design 是抄袭了 Ant Design,但也许这不是什么坏事。...而且,仔细看 Semi Design 就会发现,他的语法风格和属性名称和 Ant Design 的也很类似。
放弃了 Element UI 选择了 Ant Design Vue(最近 Element 好像复活了,麻蛋)。 工具库选择 lodash。 建立脚手架 搭建 NPM 私服。...因为公司团队跟倾向于使用 scss 开发,less 是为了覆盖 ant design vue 的样式,stylus 只有我自己喜欢这种风格。...3.组件库 因为 Element UI 长期没更新,并且之前使用过 React 的 Ant Design(重点),所以组件库选择了Ant Design Vue。...覆盖 Ant Design Vue 样式 设计师眼中的 Ant Design === '丑'(心酸)。...Ant Design Vue 中部分体积较大的组件,例如 DatePicker,根据业务需求,应考虑在页面中进行加载,尽量保证首屏加载的速度: import { DatePicker
Ant-design-vue a-select 下拉滚动的时候出现数据重复 1、问题描述 在滚动下拉列表的时候 数据由正常逐渐变成全部一样的。所以想是不是key值重复了。...Ant-design-vue a-checkbox-group 追加数据后第一个无法选中 1、问题描述 ant-design-vue a-checkbox-group 追加数据后原本第一个无法选中。
TweenOne — 用于ant.design的动画库(重点)。 查看仓库,点击此处[1] 当然,开源社区有更多的动画库和组件。 ?? 让我们开始吧。 ---- 1....如果您更喜欢滚动使用动画,则可以使用此框架。看看它是如何工作的。 ? 让我们看一下该动画的滚动效果。 ? 我们有5个区块,每个区块都有一个全屏页面和一个标题。 ?...5.TweenOne和Ant Design中的动画 Ant Design[5]是一个React UI库,其中包含大量易于使用的组件,它是用于构建优雅的用户界面的有用组件。...由中国企业集团阿里巴巴(Alibaba)创建的Ant Design,已在许多知名企业中应用:阿里巴巴(当然),腾讯,百度等。 你可以看到有很多的动画元素。...Design: http://ant.design/
目前比较成熟的关于设计语言的产品有谷歌的MaterialDesign和蚂蚁金服的Ant Design 。...Material Design和Ant Design不仅具有严格的设计规范,而且也给出了设计框架。...https://ant.design/docs/spec/introduce-cn https://material.io/design 组件化 另外值得一提的是组件化。...访问页面地址 --> 页面首次加载数据 --> 渲染出完整页面的时长 非首次情况下,命中缓存的加载缓存数据 --> 渲染出完整页面的时长。 一般我从下面几个方面着手去做,一般问题都不大。...offsetTop, 使用data-src 替换 src(真实路径) 列表懒加载(分批加载):监听滚动后offsetTop, 发送请求加载下一页的数据 路由懒加载 代码分包分块加载(webpack)
preact: Preact(类React) react: React react-dom: React DOM react-redux: React状态管理 react-router: React页面路由...vue: Vue vuex: Vue状态管理 vue-router: Vue页面路由 设计框架 amaze: Jquery移动端UI框架 ant-design: React桌面端UI框架 ant-design-mobile...: React移动端UI框架 ant-design-pro: React桌面端UI框架 bootstrap: Jquery双端UI框架 cube: Vue移动端UI框架 element: Vue桌面端UI...create-react-app: React脚手架 ionic-cli: Ionic脚手架 phonegap-cli: Phonegap脚手架 taro: Taro脚手架 vue-cli: Vue脚手架 组件 ant-motion...react-placeholder: React占位组件 react-select: React选择组件 react-spring: React弹簧动画组件 react-virtualized: React滚动组件
昨天,我们解决了 Ant Design 升级后,国际化组件 LocaleProvider 报错的问题:Vue项目使用Ant Design升级后报错`LocaleProvider` is deprecated...当参数为 top 和 bottom 时,走马灯左右轮播,当参数为 left 和 right 时上下滚动。...声明:本文由w3h5原创,转载请注明出处:《Vue项目使用Ant Design升级后报错Carousel `vertical` is deprecated的解决方法》 https://www.w3h5.
因为在之前的工作中有使用过Ant Design Vue、Ant Design Angular习惯并且喜欢Ant Design设计规范和风格,废话不多说今天我们先把ToDoList系统的Ant Design...Ant Design Blazor源码地址:https://github.com/ant-design-blazor/ant-design-blazor MongoDB从入门到实战的相关教程 MongoDB...它基于 Ant Design Pro 框架,并为 Blazor 项目提供了模板和脚手架,Blazor 项目模板(Ant Design Pro)。...Ant Design Pro 页面 模板的参数: 参数 说明 类型 认 值 -f | --full 如果设置这个参数,会生成所有 Ant Design Pro 页面 bool false -ho |...它提供了一个常用的布局模板,可以快速构建具有统一风格的页面。
fullPage.js」 一个可轻易创建全屏滚动网站的 js 滚动动画库, 兼容性无可替代 「iscroll」 移动端使用的一款轻量级滚动插件 「swiper.js」 一款强大的 js 跨端触摸滑动插件...一个兼容性极好且灵活的布局 css 库 csshake 一个能够震动和晃动DOM元素的 CSSku 库 hint.css 一个用纯 css 和 html 实现的提示库 React相关库 UI 库 Ant...design 用于研发企业级中后台产品的 UI 组件库 Ant design mobile 基于 Ant Design 设计体系的 React UI 移动端组件库 MaterialUI 世界最受欢迎的基于质感设计的...React UI 库 toolbox 一套使用 CSS 模块功能实现 Google 的 Material Design 规范的 React 组件 Fabric UI 微软开源的 UX 框架的集合,用于创建共享代码...canvas 库 react-img-editor 支持截图编辑的图片库 编辑器相关 braft-editor 富文本编辑器 powerNice 文档编辑器 mitu 图片编辑器 h5-dooring H5 页面编辑器
之前很长一段时间,国内B端设计规范都是蚂蚁集团的 Ant Design 独霸天下。但是自从去年字节 10 月推出 Arco Design 后,让一些 Ant Design 的老用户开始有些动摇。...原文也说“Ant Design 在布局空间上的成果并非要限制设计产出,更多的在于引导设计者如何做到「更好」。”,可见 Ant Design 在布局上比 Arco Design 更灵活。...另外我还发现两者一个很大的差别——页面标题。Ant Design 大部分案例页都会在面包屑(页面路径)下放一个很大的标题,而且这个标题和面包屑最后一项的文字是一模一样的。...而 Arco Design 大部分页面没有这个页面标题,也多半是模块标题,和面包屑最后一项不一样。...Arco Design而 Ant Design 刚好反过来,默认必填,选填会用灰字标出。Ant Design如果表单很大,Arco Design 和 Ant Design 都有分组样式。
官网教程:https://pro.ant.design/docs/getting-started-cn github链接:https://github.com/ant-design/ant-design-pro...://github.com/ant-design/ant-design-pro.git my-project克隆到自己的本地文件夹里面 或者直接从github下载到本地:github链接:https:/.../github.com/ant-design/ant-design-pro ?...到这里就已经把Ant Design Pro搭建好了,接下来新建一个界面 选择基于 基于 block 开发,快速构建标准页面 ? 添加空白页 ? 添加个人中心 ? 这个时候就自动生成 ?...在空白页面里面点击右下角按钮,可以根据自己的需要添加各种组件 ?
前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT 支持微服务。强大的代码生成器让前后端代码一键生成!...点开后无子节点问题 日志保存失败,导致业务操作也失败问题 多数据源配置,多增加了几种数据库类型 职位功能导入失败处理 前端UI升级 删除无用的组件,简化代码 自定义组件改成全局注册,省去了组件手工引入 升级ant-design-vue...表单提交之前新增 beforeSubmit方法 Online功能测试,行编辑组件默认换成JVxeTable(支持切换) Online视图支持唯一校验规则 Online视图去除增强配置按钮 Online 树形列表支持滚动条...#2044 列表自定义项,弹出的popover会随columns的个数及title长度而不合理地变宽 #2030 2.4版本在线生成主附表 生成有误 issues/I29ZGO 如果你是老版本JeecgBoot...采用最新主流前后分离框架(SpringBoot+Mybatis-plus+Ant-Design+Vue),容易上手; 代码生成器依赖性低,灵活的扩展能力,可灵活实现二次开发; 开发效率很高,采用代码生成器
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project 目录结构...Ant Design Pro 的布局 在 Ant Design Pro 中,我们抽离了使用过程中的通用布局,都放在 layouts 目录中,分别为: BasicLayout:基础页面布局,包含了头部导航...如何使用 Ant Design Pro 布局# 通常布局是和路由系统紧密结合的,Ant Design Pro 的路由使用了 Umi 的路由方案,为了统一方便的管理路由和页面的关系,我们将配置信息统一抽离到...Ant Design 布局组件# 除了 Pro 里的内建布局以为,在一些页面中需要进行布局,可以使用 Ant Design 目前提供的两套布局组件工具:Layout 和 Grid。...除了 Ant Design 官方提供的布局组件,也可以试试 社区精选 里推荐的布局组件。 具体可以参考官方文档: ?
升级点 首先对我而言最大的改进在于性能,select ,table 和 tree 已经全面支持了虚拟滚动,作为了早早的使用了 rc-tree来解决性能问题的人,antd@4 中提供自然是更好不过了,毕竟自己写样式和动态是非常复杂的...# 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src # 或者全局安装 # 使用 npm npm i -g @ant-design...另外由于 form 不兼容,codemod 不会自动帮你迁移到新的写法, 但是迁移到兼容包 @ant-design/compatible 方便在和新版本一起使用,而不用完全迁移。...Pro中使用 Pro 在第一时间也迁移了 antd@4 ,我们只需要在 create umi 中选择 ant-design-pro,即可获得最新的 4.0 分支代码。...target=https%3A//protable.ant.design/ [4] 一把: https://link.zhihu.com/?
安装Ant Design在项目目录中,使用 npm 或者 yarn 安装 Ant Design:npm install antd或者yarn add antd从卡片(Card)到排版(Typography...使用 Ant Design 的组件,你可以轻松创建独特而且令人印象深刻的博客页面。在你的 React 组件中引入 Ant Design 组件。...此时,你已经开始感受到 React 和 Ant Design 的默契配合,让博客的呈现更为生动。通过路由实现多页面为了更好地组织博客内容,我们引入了 React Router。...同时,你还可以选择覆盖默认的 Ant Design 样式,以确保博客页面与你的品牌或主题风格一致。部署与分享当你的博客制作完毕,接下来就是分享的时刻。...React 的灵活性和 Ant Design 的美学设计让博客开发变得如此简单而有趣。
对于一个完整的中大型单页面应用项目所必须的插件和框架。 一、vue-cli vue-cli 也叫脚手架,官方定义为Vue.js开发的标准工具!...它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。...基于 Vue.js 过渡系统的视图过渡效果 5)细粒度的导航控制 6)带有自动激活的 CSS class 的链接 7)HTML5 历史模式或 hash 模式,在 IE9 中自动降级 8)自定义的滚动条行为...Ant Design Vue 是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。 elementUI 是基于 Vue 2.0 桌面端中后台组件库。
领取专属 10元无门槛券
手把手带您无忧上云