> 底部表 在 support design library 的 v23.2 版本中已经支持底部表了。...Modal 形式的底部表 Modal 形式的底部表基本上是从底部滑入的 Dialog Fragments。关于如何创建这种类型的 fragment 可以查看本文。...可选的第三方底部表 除了 design support library 中提供的官方底部表，有几个可选的非常流行的第三方库，他们在某些特定用法下更容易配置和使用： ?...Foursquare BottomSheet Tutorial - 概述如何用第三方底部表来实现在老版本的 Foursquare 中使用的效果。...然而，它似乎不影响滚动，如这篇博文所述。
+iconfont react-router-v4:路由4.x版本 redux:状态管理 ant-design-mobile:UI组件 iconfont:字体icon 3.1.3适配方案 rem适配 3.1.4...地址，欢迎 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适配方案 左侧固定宽度，右侧自适应 右侧导航分别配置滚动条.控制整个page 3.2.4技能点分析 技能点 对应api...本文从后台利用node的框架koa+mongodb实现数据的增删改查和注册接口，前端利用umi + dva +ant-design-pro来实现数据渲染。...Context,通过ctx访问暴露的方法 ctx方法 request:请求主体;response:响应主体;ctx.cookies.get:获取cookie;ctx.throw:抛出异常 request
所以Toolbar的上部边缘是不可以往下拉的，只有下部边缘才能往下拉，这样的视觉效果好比Toolbar如电影幕布一般缓缓向下展开。...声明工具栏的滚动行为标志； 其实真正运行的时候，Toolbar的高度是固定不变的，变化高度的是CollapsingToolbarLayout。...如果仅仅声明scroll，没有声明其它标志，则滚动效果如下图所示： ? 2、enterAlways : 头部与主体先一起滚动，头部滚到位后，主体继续向上或者向下滚。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部固定不动，主体继续向上滚动。 向下滚动：头部固定不动，主体先向下滚动，一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。
可是仅仅使用Toolbar的话，还是有些呆板，比如说Toolbar固定占据着页面顶端，既不能跟着主体页面移上去，也不会跟着主体页面拉下来。...NestedScrollView继承自FrameLayout，其用法与ScrollView相似，如都必须且只能带一个直接子视图，都是允许视图上下滚动等等。...1、AppBarLayout的滚动依赖于主体视图的滚动，与主体视图相对应的，可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分，那么就存在谁先滚谁后滚的问题了。...然后头部固定不动，主体继续向上滚动。 向下滚动：头部固定不动，主体先向下滚动，一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。
注意：建议 @ant-design/compatible 仅在升级过程中稍作依赖，升级 4.x 请完全剔除对该过渡包的依赖。...# 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod apps/xxxx # 或者全局安装 # 使用 npm npm i -g @ant-design...该命令完成的工作： 1. 将 Form 与 Mention 组件通过 @ant-design/compatible 包引入 2....用新的 @ant-design/icons 替换字符串类型的 icon 属性值 3....注意：antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。
它用于开发 PC 端的页面还是绰绰有余的。 Ant Design of Vue 它是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。...特性： 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Vue 组件。 共享Ant Design of React设计工具体系。...四、前端控件降低报表开发工作量 不管是哪个行业系统，主体都是数据的录入和展示。录入部分相对简单一些，展示环节通常充满了挑战。 相比于有固定模式的数据录入环节，数据展示则是完全个性化的。...尤其是前端报表，数据量大、图表多、样式要求高，耗费了前端工程师大量的时间。报表中简单的当属二维表的数据展示形式，包含数据透视表、表格类报表展示等。...所有以固定格式呈现数据的，都可以归类为报表。
1、工程化实践 umi+dva作为底层框架，Ant Design Mobile为 UI 组件库，是蚂蚁金服推崇的的react项目最佳实践，具有国际化、权限、数据流、配置式路由、补丁方案、自动化 external...方面等等方便一线开发者的功能，部分功能代码可以参考Ant Design pro，目录结构预览如下 2、通用组件 ErrorBoundary 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃...，data-src * 3，停止监听当前的节点 * @param {*} ele 监听的img元素类名，如 .imgBox * @param {*} callback * @param {*}...watch 监听的变化数据，如data变化后触发此hook逻辑 */ let observer; export default function useImgHook(ele, callback,...hook 滚动到底部再加载数据 import { useEffect } from 'react'; let observer; export default function useObserverHook
Scaffold 实现基本的材料设计视觉布局结构。 ? 此课程提供了用于显示抽屉，短文本和底部表的API。...要显示snackbar或持久底部表，请通过Scaffold.of获取当前BuildContext的ScaffoldState，然后使用ScaffoldState.showSnackBar和ScaffoldState.showBottomSheet...final resizeToAvoidBottomPadding → bool 主体（和其它浮动部件）是否应该自己调整大小以避免窗口的底部填充. [...]...Appbar 一个Material Design应用程序栏。 ? 应用程序栏由工具栏和其它可能的部件（如TabBar和FlexibleSpaceBar）组成。...应用程序栏通常用在Scaffold.appBar属性中，该属性将应用程序栏作为固定高度的小部件放置在屏幕的顶部。
自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...导航抽屉表可以从屏幕左侧出现 (1)，或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5％ ?...行为 滚动 Navigation drawers 可以垂直滚动，独立于屏幕内容和 UI 的其余部分。...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘的 modal drawers。...调整 bottom navigation drawer 的打开位置，以便在屏幕底部剪切最后一个视图中的列表项。 这可以通知用户有更多项目要查看。
BackTop（回到顶部）对于页面较长的网站，如新闻网站或者电商产品列表页面，当用户滚动到页面底部后，想要快速回到顶部时，BackTop 组件就非常有用。用户点击这个组件，页面就会平滑地滚动到顶部。...Message（全局提示）当需要在页面上显示一些全局的提示信息，如操作成功或者失败的提示，Message 组件可以在页面的某个固定位置显示这些信息。...Segmented（分段控制器）在一些需要用户在几个固定选项中进行切换的场景，如切换不同的视图模式、不同的分类等，Segmented 组件可以实现这种分段控制的功能。...与Vue-Amazing-Ui相比，Element UI的组件数量较少，但质量较高。Ant Design VueAnt Design Vue是蚂蚁金服推出的Vue组件库，具有完善的组件和丰富的功能。...与Vue-Amazing-Ui相比，Ant Design Vue的文档和示例更为详细。总结Vue-Amazing-Ui是一款具有特色的Vue组件库，提供了丰富的组件和强大的自定义能力。
在设计规范的指导下，开发部门在搭建全局共用控件时，产品设计规则就会更加清晰明了，如：产品设计中的按钮、间距、字体大小、颜色、列表等元素的设计明确。...: 头部区域header 、主体区域main、底部区域footer。...列数太多：默认展示范围：3-8列，若出现更多，可固定重要列，剩余列滚动条展示交互设计。 列表的宽度：宽度自适应，但根据字段的重要性显示，重要字段优先完整显示。...滚动条：表格内容超过一屏需要显示竖向滚动条时，需要固定表头。只需滚动表格内容就好。如下图所示。 空数据：表格某部分无数据时用 “-” 来填充显示,对于数据为零的单元格，填上 0 即可。...参考文献如下： 1、ZAN-DESIGN 的有赞网站 2 《CCtalk B端产品设计课》by 美芳老师 3、ANT-DESIGN 蚂蚁金服等网站 4、阿里系的数据可视化的设计网站 最后分享一个小故事，
但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。...如果在蒙层的内部进行滚动，当蒙层内滚动条滚动到底部的时候再继续滚动的话，蒙层下的页面也是能够滚动的，这样的交互就比较混乱，文中内容的测试环境是Chrome 96.0.4664.110。 滚动到顶部和滚动到底部的时候禁止滚动，否则触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动，这样的话逻辑的复杂程度就比较高了...，要阻止页面滚动，可以将其固定在视图中即position: fixed，这样它就无法滚动了，当蒙层关闭时再释放，当然还有一些细节要考虑，将页面固定视图后内容会回头最顶端，这里我们需要记录一下用来同步top...html> 每日一题 https://github.com/WindrunnerMax/EveryDay 参考 https://zhuanlan.zhihu.com/p/373328247 https://ant.design
都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。...例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。...，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...> app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。...记住，要把带有scroll flag的view放在前面，这样收回的view才能让正常退出，而固定的view继续留在顶部。
弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。...高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出: 768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px 弹框高度控制在...可以想像将会有一大波移动上的体验会搬到网页设计上，如弹框中包含多个层级，透过左上角返回的交互体验，更灵动及细腻的动画效果等。...视觉表现方面，之前也提到过，将会有更多产品会为了在大屏幕下有更好的视觉效果做出针对性的设计。而随著产品愈来愈追求简洁，UI也变得愈来愈轻盈，甚至透明。弹框也许不再需要用一个框框去包住主体。...Squarespace的登录弹框 Evernote的修改标签弹框 扩展阅读 5 essential ux rules for dialog design http://babich.biz/5-essential-ux-rules-for-dialog-design
背景 border 边框 banner 页面上的一个横条 both 二者都是clear 属性的一个属性值 black 黑色 bottom 底部，是一个CSS 属性 blink 闪烁 box 盒子 block...中间，居中 connected 连接的 contact 联系 child 孩子 content 内容 circle 圆圈 crosshair 十字叉丝 class 类别 css 层叠样式表 clear...decimal 十进制 division 分区， decoration 装饰 document 文档 default 默认的 definition 定义 dotted 点线 double 双线 design...form 表单 footer 页脚 from…to 从…到 first 第一 focus 焦点 fadeIn 淡入 fadeOut 淡出 find 查找 fixed 固定的 function函数，功能...提交 scroll 滚动 shadow 阴影 silver 银色 square 方块 solid 固体，实线 static 静态的 solution 方案 strong 强壮，加粗的 style 样式
，6位（如：#0470C4）就是RGB，值8位（如：#1E000000）头两位是透明度，后6位是RGB值，00是完全透明，FF是完全不透明，比较适中的透明度值是 1E。...底部动作条呈现了简单、清晰、无需额外解释的一组操作。 编辑 编辑 通常以列表形式出现，支持上下滚动。 编辑 编辑 也可以是网格式的。...编辑 菜单过长时，需要显示滚动条。 编辑 菜单从当前选项固定位置展开，不要跟随点击位置改变。 编辑 菜单到上下留出8dp距离。 ...编辑 滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。 编辑 存在浮动按钮时，小标题要让出位置，与文字对齐。 ...手机端的侧边抽屉距离屏幕右侧56dp。 编辑 侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。
✍ 此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版，拥抱Vue3.0将前端框架替换成字节最新开源的arco.design，其中约60%重构和20%新增内容，定位为从 0-1手把手实现简单的测试平台开发教程...正式开始前，帮朋友做一个小测试，插播一个职场小调查，希望了解下大家在职场里的求职考量。点击下方小程序或底部阅读原文均可参与填写，多谢！...单元格 ：表格的主体由多个单元格组成，单元格内支持文字、图标、按钮、标签、单选框、复选框等元素。 行列分割线：从视觉上分隔信息。...由表头和单元格组成，无其他拓展操作，对数据进行最基础展示； 固定表格 用于在固定表格重要行或列（一般为头和两边列）内容展示不全场景，出现滚动条可滑动预览； 选择表格 表格可以配置行的CheckBox，...https://arco.design/vue/component/table#API Props 表属性 columns：表格的列定义 - TableColumnData[] 类型
全屏布局 经典的「全屏布局」由顶部、底部和主体三部分组成，其特点为三部分左右满屏拉伸、顶部底部高度固定和主体高度自适应。该布局很常见，也是大部分Web应用主体的主流布局。...top:0和bottom:0将其吸顶和吸底，并声明俩高度为固定值；将主体的top和bottom分别声明为顶部高度和底部高度。...display:flex默认会令子节点横向排列，需声明flex-direction:column改变子节点排列方向为纵向排列；顶部和底部高度固定，所以主体需声明flex:1让高度自适应。...细心的同学可能发现这些节点在某些滚动时刻处于相对定位，在特定滚动时刻处于固定定位。...bottom为40px，滚动到距离容器底部40px就固定 第5个：bottom为0px，滚动到容器底部就固定 当然，换成left或right也一样能实现横向的吸附效果。
制访问控制下，用户（或其他主体）与文件（或其他客体）都被标记了固定的安全属性（如安全级、访问权限等），在每次访问发生时，系统检测安全属性以便确定一个用户是否有权访问该文件。...属性包括请求主体的属性、请求客体的属性、请求上下文的属性、操作的属性等。如身为班主任（主体的属性）的老张在上课（上下文的属性）时可以踢（操作属性）身为普通学生（客体的属性）的小明一脚。...对于我们前端开发者而言，我们需要的其实就是 得到用户的一个角色权限 使用得到的权限进行比较，对结果进行不同的处理 那我们来看看ant design pro 的权限方案是如何处理的。...ant design pro 中的权限方案 业界比较通用的ant design pro中的权限方案是如何设计的呢？ 获取用户角色权限 一开始在进入页面的同时，会进行登陆校验。...新权限方案 在新方案中，业务包只保留权限的公共方法，把页面权限判断的逻辑进行的下放，子产品自己维护自己的权限判断逻辑，修改一条权限的逻辑也非常的容易， 相比起 ant design pro 中通过角色进行判断
前后端分离架构 SpringBoot2.x/3.x，SpringCloud Alibaba，Ant Design&Vue3，Mybatis-plus，Shiro;支持AI大模型DeepSeek和ChatGPT...JRangeNumber 而且页面中不显示 · Issue #7549 3.7.1 bug：JVxeTable 单选删除不生效 · Issue #7624 v3.7.2弹窗全屏底部有空隙 · Issue...，后面图片的接口还是使用公共上传接口 #7750 sys_announcement_send表的sql文件没有设置id为主键 #7725 升级AI助手，deepseek 每次发送新的消息提问，会把之前的提问消息历史重复发送...采用最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue），容易上手; 代码生成器依赖性低,灵活的扩展能力，可灵活实现二次开发; 开发效率很高,采用代码生成器...目前提供四套风格模板（单表两套、一对多两套） 封装完善的用户、角色、菜单、组织机构、数据字典、在线定时任务等基础功能。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
