文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

谈设计与技术，以WEB布局为例

，宽度采用百分比的方式进行设置。...把父级元素的 style 的 display 设为 flex ，即可开启 flex 布局方式。 ? ? flex-direction 可以设置主轴方向。...这里以 Ant Design 为例，总结一些布局方面的思考。 Ant Design 受到建筑界大师柯布西耶的模度思想的启发，基于“ 秩序之美 ”的原则，提出了动态、体系化的布局方式。...3.3 栅格体系（网格体系） 这里引用 Ant Design 的官方说明：“ 对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格 ”。...从 Ant Design 的实现，我觉得： “ 技术实现了更好的设计，设计传达了技术 ” 以上，是一些关于设计与技术的思考： “ 设计思维模式跟技术实现的情况密切相关，设计的自由度要求技术不断演进，

1.4K70
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    JeecgBoot 3.4.2 版本发布，Vue3版本大升级

    前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT 支持微服务。强大的代码生成器让前后端代码一键生成!...jeecgboot-vue3后台源码https://github.com/jeecgboot/jeecg-boothttps://gitee.com/jeecg/jeecg-boot升级日志 重点升级ant-design-vue...Vue3 UI升级升级ant-design-vue到3.2.12、升级vite等前端依赖升级antd3后，moment全部替换为dayjswebsocket功能优化表单支持右侧嵌入评论区、附件区代码格式化调整自动检查...—> .ant-tabs-nav下拉类型的SelectTypes更名为SelectValue更多升级日志见 从 ant-design-vue 2.x 版本升级到 ant-design-vue 3.x...采用最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue），容易上手; 代码生成器依赖性低,灵活的扩展能力，可灵活实现二次开发;开发效率很高,采用代码生成器

    3.1K30

    实现不同分辨率下字体大小自适应的原理是什么？

    结合 Ant Design 这类 UI 框架时，实现原理可以分为以下几个层面：1....基于视口单位的动态计算CSS 提供了与视口相关的单位，可直接根据屏幕宽度动态调整字体大小：​​vw​​（viewport width）：视口宽度的 1%（例如 ​​font-size: 1vw​​ 表示字体大小为屏幕宽度的...UI 框架的主题变量联动（以 Ant Design 为例）Ant Design 的组件样式基于 Less 变量开发，其中 ​​@font-size-base​​ 是控制全局字体大小的基准变量（默认 14px...Design 样式，使其使用上述变量@import '~antd/dist/antd.less';原理：利用 Less 变量的动态特性，结合媒体查询让 Ant Design 的全局字体基准值随分辨率变化...（如 Ant Design 的 ​​@font-size-base​​）实现组件级联调整复杂场景下通过 JavaScript 动态计算并修改样式最终目标是在不同分辨率的设备上，保持字体的可读性和页面布局的协调性

    72110

    Vue+Ant Design表格组件开发实战：从问题到优化的完整指南

    《Vue+Ant Design表格组件开发实战：从问题到优化的完整指南》 前言 在现代前端开发中，数据表格是展示信息最常用的组件之一。...本文将详细记录一个基于Vue和Ant Design的表格组件开发过程，从最初的需求实现到遇到问题，再到最终优化方案的完整思考过程。...滚动设置不当：scroll.x值设置不合理 CSS样式冲突：Ant Design默认样式与我们的需求有冲突 3.3 初步修复尝试 我们首先尝试调整列宽和滚动设置： :scroll="{ x: 1800...important; } 六、总结与最佳实践 通过这个案例，我们总结出以下Ant Design Table组件的最佳实践： 固定列设计： 关键信息固定在左右两侧 固定列宽度适当加大...希望这些经验能帮助你在未来的项目中更好地使用Ant Design Table组件。

    89510

    Vue，React，微信小程序，快应用，TS 和 Koa 一把梭

    效果图 image.png Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star 3.1.2技术栈 react + react-router-v4 + redux +ant-design-mobile...+iconfont react-router-v4:路由4.x版本 redux:状态管理 ant-design-mobile:UI组件 iconfont:字体icon 3.1.3适配方案 rem适配 3.1.4...3.2 react-pc-template篇 3.2.1效果图 image.png Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star 3.2.2技术栈 dva+umi+ant-design-pro...dva:可拔插的react应用框架,基于react和redux mui:集成react的router和redux ant-design-pro:基于react和ant-pc的中后台解决方案 3.2.3...本文从后台利用node的框架koa+mongodb实现数据的增删改查和注册接口，前端利用umi + dva +ant-design-pro来实现数据渲染。

    4.1K20

    记Ant Design Vue Modal组件的使用及踩的坑

    最近在使用 Vue 开发一个项目，前端框架用的 Ant Design ，Ant Design for React 已经比较成熟，兼容性和灵活性也比较高。...但是 Ant Design for Vue 貌似还有点不那么完善。 今天先整理一下 Modal 组件的使用及我开发过程中注意到的一些点。...Antd for Vue Modal 组件的使用： 引入及注册： 首先要引入 Vue ，然后是 Ant Design Modal 组件： import Vue from 'vue' import { ...Modal } from 'ant-design-vue'; Antd 的安装和配置我就不赘述了，详情见官方API：在 vue-cli 3 中使用 在使用之前，必须要先注册组件： Vue.component...} 声明：本文由w3h5原创，转载请注明出处：《记Ant Design Vue Modal组件的使用及踩的坑》 https://www.w3h5.com/post/448.html

    24.6K43

    Vue+Ant Design性能优化实战：大数据量下拉框卡顿与表单提交优化

    Vue+Ant Design性能优化实战：大数据量下拉框卡顿与表单提交优化 前言 在现代前端开发中，处理大数据量渲染和表单交互是常见的挑战。...本文基于实际项目中的问题，探讨如何优化 Ant Design Vue 下拉框（Select）在大数据量情况下的性能问题，并解决 表单提交后重复提示的问题。...当 mediaAdSlotList 数据量较大时（例如超过1000条），Ant Design 的 a-select 会渲染所有 option，导致 DOM 节点过多，页面卡顿。...解决方案：优化大数据量下拉框 (1) 虚拟滚动（Virtual Scroll） Ant Design Vue 的 a-select 支持虚拟滚动，仅渲染可视区域内的选项，大幅提升性能。...总结与最佳实践 (1) 下拉框优化总结 方案 适用场景 优点 缺点 虚拟滚动 大数据量（1,000+） 高性能，流畅渲染 需要 Ant Design 支持 分页加载 超大数据量（10,000+） 减少初始加载时间

    96110

    CSS之1px问题

    maximum-scale=1, minimum-scale=1, user-scalable=no"> 使用 css 渐变linear-gradient或者box-shadow 其他单位问题 百分比 宽度...，水平方向相对参考值是盒子的宽度，垂直方向相对参考值是盒子的高度 文本大小（font-size）支持百分比值，相对参考值是父元素的font-size的值 边框（border）、盒阴影（box-shadow...，相对于其初始字体大小，本质就是等比缩放 em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小。...如果改元素没有设置，则一直向父级元素查找，直到找到，如果没有设置大小，使用浏览器默认大小。...—lib.flexible库解析 淘宝flexible ant-design-mobile 组件库 蚂蚁金服 vant 组件库 有赞 未完待续，持续更新中...

    1K10

    Ant Design：企业级UI开发的“默认答案”

    引言：为什么每个React开发者都该知道Ant Design2026年，如果你去问一个React开发者：“中后台项目选什么UI库？”十有八九会得到一个答案——Ant Design。...第一部分：Ant Design到底是什么1.1 不是“UI组件堆砌”Ant Design的官方定义是“企业级UI设计语言和React组件库”-1。...，而非装饰生长性：设计体系能随业务复杂度扩展听起来有点抽象，但落实到具体组件上就很好理解：Ant Design的按钮大小、颜色、状态（正常/悬停/点击）是统一的，表单标签统一左对齐、输入框宽度统一为320px...Ant Design把这些都封装好了，开发者只需要组合组件、配置属性、绑定数据。某金融系统的实测数据显示，用Ant Design的Table替代自定义表格后，开发效率提升40%，崩溃率下降65%-6。...这意味着在IDE里使用Ant Design组件时，属性提示、类型检查、自动补全都非常完善。实测数据显示，使用TypeScript版本的Ant Design可以减少70%以上的类型相关bug-6-4。

    17110

    PC项目移动端适配实战 | Viewport Meta配置与DPR动态计算实践

    = CSS像素 * DPR * scaleY示例：当DPR=2时 => 1px * 2 * 0.5 = 1物理像素2.3.3 方案优势分析维度传统方案本方案DPR兼容性仅支持2x屏支持1x/2x/3x全适配边框位置仅底部边框可扩展四边边框性能影响可能引起重绘独立渲染层优化维护成本多套代码维护单一...2、动态响应原理3.3 Ant Design Mobile适配实践import { ConfigProvider } from 'antd-mobile';import zhCN from 'antd-mobile...* (当前视口宽度 / 设计稿基准宽度)示例：当视口宽度=375px时 => 100*(375/750)=50px即：1rem=50px4.2 PostCSS自动转换工作流// postcss.config.jsmodule.exports...border'], // 边框不转换 selectorBlackList: ['.ant-'] // 忽略Ant Design组件 } }}重点逻辑：rootValue 需与JS计算的基准值一致...selectorBlackList 排除第三方库（如Ant Design）避免样式错乱。

    1.5K31

    我用了多年的前端框架，强烈推荐！

    Ant Design Pro 是由蚂蚁金服开发的、基于 Ant Design 组件库的开发框架，专门用于构建企业级管理后台和前端应用。...img 除了 Ant Design Pro 外，我们最好再了解一下 Ant Design 相关的技术生态，比如： 1）Ant Design：一套企业级 UI 设计语言和组件库。...地址：https://ant.design/ img 2）Ant Design ProComponents：在 Ant Design 的基础上进行封装和高度定制化的组件库，包含了像高级表格、表单等常用的业务组件...而作为一名全栈开发者，鱼皮个人喜欢使用 Ant Design 和 Ant Design Pro 全家桶的重要原因是：Ant Design 同时有 Vue 和 React 的实现版本，无论我选择什么前端框架开发项目...这里再给大家几个学习建议： 根据项目选择合适的文档版本，再去阅读，v4 版本和 v5 版本差异非常大，我个人更喜欢用 v4 版本 新手在不熟悉 Ant Design Pro 功能之前，建议不要创建全量区块项目

    1.4K20

    React getPopupContainer 一招解决浮层错位问题

    在用 React 结合 Ant Design 或其它组件库开发时，你可能会发现下拉菜单、Tooltip 或选择框弹出的内容常常被父容器遮挡、错位、滚动时不跟随、甚至弹窗弹出后位置异常。...Ant Design 等组件库几乎都提供了 getPopupContainer 属性，可以让你手动指定弹出层的渲染位置，从而解决遮挡、错位等困扰。...为什么出现 BUG 当我们在页面中使用下拉框、Tooltip 或 Popover 时，Ant Design（以及很多 React 组件库）为了防止被样式影响，会把弹出层渲染到 document.body... ant-select-dropdown">... <!...getPopupContainer 一二 在大多数 Ant Design 组件中（如 Select、Dropdown、Tooltip 等），你都可以通过 getPopupContainer 参数来控制弹出层的挂载位置

    61910

    【React】620- 为React应用制作动画的5种方法

    TweenOne — 用于ant.design的动画库（重点）。 查看仓库，点击此处[1] 当然，开源社区有更多的动画库和组件。 ?‍? 让我们开始吧。 ---- 1....其中一种方法是在导航上方创建一个包装器(wrapper)，并触发页边距margin的更改，导航的宽度为 250px。并且包装器的margin-left 或 translateX 属性具有相同的宽度。...5.TweenOne和Ant Design中的动画 Ant Design[5]是一个React UI库，其中包含大量易于使用的组件，它是用于构建优雅的用户界面的有用组件。...由中国企业集团阿里巴巴（Alibaba）创建的Ant Design，已在许多知名企业中应用：阿里巴巴（当然），腾讯，百度等。 你可以看到有很多的动画元素。...Design: http://ant.design/

    5.6K20

    从项目中由浅入深的学习react (2)

    react代码so-easy 1.react-mobile篇 1.1 效果图 react-mobile项目,欢迎star 1.2 技术栈 react + react-router-v4 + redux +ant-design-mobile...+iconfont react-router-v4:路由4.x版本 redux:状态管理 ant-design-mobile:UI组件 iconfont:字体icon 1.3 适配方案 rem适配 1.4...中的路由懒加载 classNames 动态css的类 2.react-pc-template篇 2.1效果图 react-pc-template项目, 欢迎star 2.3技术栈 dva+umi+ant-design-pro...dva:可拔插的react应用框架,基于react和redux mui:集成react的router和redux ant-design-pro:基于react和ant-pc的中后台解决方案 2.4适配方案...左侧固定宽度，右侧自适应 右侧导航分别配置滚动条.控制整个page 2.5技能点分析 技能点 对应api 路由 基于umi,里面有push,replace,go等方法 状态管理 dva里面的redux

    2.1K40
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券