记录一波自己在这段时间碰到的一个Ant Design Pro 的坑： 每次点击菜单都会将其他菜单自动收起来，导致一系列的用户体验不佳。
ProLayout 高级布局是 Ant Design Pro 中的一个组件，可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。...，但是点击菜单不能进行路由跳转。...在网上查了，其中有一个是菜单图标用的 他说自带的 icon 改造起来更麻烦，其实不是的。.../pro-layout'; import ProLayout, { PageContainer, MenuDataItem } from '@ant-design/pro-layout'; import...import { HomeFilled, SettingFilled } from '@ant-design/icons'; // 菜单图标 export const IconMap = { home
可以内部滚动的菜单 级联菜单（仅限pc） 级联菜单可根据菜单与屏幕垂直和水平边缘的接近程度放置菜单。 ?...具有动态内容的菜单可能具有其他行为，例如：将先前使用的字体放在菜单的顶部；订单可以根据用户操作进行更改。 菜单嵌套 菜单项可以显示嵌套的子菜单。...理想情况下，嵌套的层级都需要做显示，因为很难用嵌套多层的子菜单进行导航。 ? 菜单项例子 不可用的操作 将操作显示为不可用（如置灰）而不是将其删除，让用户知道它们可以在正确的条件下存在。...垂直对齐 靠近屏幕边缘时，简单菜单将垂直重新对齐，以使所有菜单项完全可见。...·简单菜单始终在屏幕的左侧和右侧保持16dp的留白（手机）或24dp留白（平板）。 ? ·如果简单菜单中的文本长到需要换行，就改为使用Simple Dialogs，因为可以有不同高度的行（如下图）。
二、主题定制 打开官方文档，官方文档地址：https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单，点击进入，可以看到如下内容： Ant...菜单中，刚好我们项目是通过这种方式创建的，在这个菜单中告诉我们有一个高级配置： 高级配置中介绍到对 create-react-app 的默认配置进行自定义，这里我们使用 craco，那么 craco...然后运行项目，可以看到 Button 组件的样式是默认的蓝色： 这里我们就需要对 Ant Design 的主题进行定制，让它符合我们自己的主题色，例如我们这里就将主题色改为绿色。...然后我紧接着在文档中又搜索 AliasToken，我一下子就悟了： 通过上图中可以看到提供了很多的 Token 名称，例如 boxShadow 就是用来配置元素阴影样式，根据这里不同的 Token 名称...然后我将主题色改为绿色，运行项目，可以看到主题色已经改为绿色了： 这里我们就可以根据自己的需求，对 Ant Design 的主题进行定制，让它符合我们自己的主题色。
项目介绍 Jeecgboot-Vue3 采用 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能...#3278 修复目前后台接口挂了界面跳转404,改为直接跳转到登录界面 调用表单的 resetFields不会清空当前信息，界面显示上一次的数据 设置disabled，图片上传没有被禁用 【vue3】用户管理抽屉移动不能自适应...出现activeKey.value=ref('XXX')的情况#I515ZE 用docker构建报JavaScript heap out of memory#I530MB 首页功能搜索功能，当搜索结果为菜单含子菜单时...折线图等等报表的组件（经过封装，使用简单） │ └─在线code编辑器 │ └─上传文件组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ └─Mock示例（子菜单很多...） │ └─页面&导航（子菜单很多） │ └─组件&功能（子菜单很多） ├─高级功能 │ ├─支持微前端 │ ├─提供CAS单点登录 │ ├─集成Websocket消息通知机制 │ ├─支持第三方登录
前言 antd 对树形控件目录进行增删改查 最近在用Ant Design写一个后台，遇到的需求就是实现一个可动态增减和编辑子节点的Tree。...实现的效果如下： 可以增加父子节点 可以删除子节点 可以编辑子节点信息 可以取消编辑信息 具体的效果图如下： 直接上代码 vue组件 <!...data.policiesAndRegulationss[index].scopedSlots = { title: 'custom' } //遍历一级添加插槽 //二级菜单名字改为...= data.policiesAndRegulationss[index].policiesAndRegulationsAOList //删除原 二级菜单
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project 目录结构...Pro 扩展配置# 我们在 router.config.js 扩展了一些关于 pro 全局菜单的配置。...，注意这里是国际化配置的 key，具体展示菜单名可以在 /src/locales/zh-CN.js 进行配置。...icon: 当前路由在菜单下的图标名。 hideInMenu: 当前路由在菜单中不展现，默认 false。 hideChildrenInMenu: 当前路由的子级在菜单中不展现，默认 false。...Ant Design 布局组件# 除了 Pro 里的内建布局以为，在一些页面中需要进行布局，可以使用 Ant Design 目前提供的两套布局组件工具：Layout 和 Grid。
2、ant design pro ant design pro 有提供三种布局。 （1）顶部菜单布局 即：顶部导航菜单 + 内容区域。...这种方式布局简单，但缺点很明显，菜单都挤在顶部导航区域，在菜单项越来越多时就放不下了，很难处理，可扩展性不强。 （2）侧边菜单布局 侧边菜单 + 顶部导航 + 内容区域。...flex布局有个特性是：只对一个子元素设置flex: 1属性时，该子元素默认会撑满父容器的剩余空间。...路由配置数据： import PageLayout from '@/components/PageLayout' import { HomeOutlined } from '@ant-design...本文示例项目源码：react-antd-mobx-admin 参考链接： https://panjiachen.gitee.io/vue-element-admin/ https://preview.pro.ant.design
项目介绍 Jeecgboot-Vue3 采用 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能...全新的VUE3技术栈，不只追赶技术潮流，更兼备大型项目优势。 提供了详细的 零基础入门视频，不懂vue3的也可快速入门。 非在Vue2版上简单升级，而是完全重写，力求每行代码的精美。...折线图等等报表的组件（经过封装，使用简单） │ └─在线code编辑器 │ └─上传文件组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ └─Mock示例（子菜单很多...） │ └─页面&导航（子菜单很多） │ └─组件&功能（子菜单很多） ├─高级功能 │ ├─支持微前端 │ ├─提供CAS单点登录 │ ├─集成Websocket消息通知机制 │ ├─支持第三方登录...建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助: Vue3 文档 TypeScript Vue-router Ant-Design-Vue Vben文档 Es6 Vitejs
3.2、快速入门 3.2.1、部署安装 下载地址：https://github.com/ant-design/ant-design-pro 我们使用资料中提供的，已经下载好的文件：ant-design-pro-master.zip...第一步：将ant-design-pro-master.zip解压到任意目录，我的目录是F:\code ?...Ant Design Pro提供的目录如下： ? 第二步，导入项目到Idea中 ? ? ?...3.2.2、菜单和路由 默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路 由。 在pro中，菜单和路由，在router.config.js配置文件中进行管理： ?...3.2.3、新增页面 上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？
当我检查页面时，发现一个问题，我的导航条缺失了一些原本拥有的样式，鼠标放到子菜单项时不再变色了。 效果如下： ? Bug 这虽然是个小问题，但还是会影响用户体验的，所以必须要处理下。...缺失代码如下： .ant-menu-item-active { color: #1890ff; } 原本当鼠标悬停到菜单项时，会自动为该元素添加 xx-active 类名，然后触发上述样式代码变蓝色...版本边界很好理解，假设我的代码是从 v14.0.0 版本升级到 v14.16.3 版本，那么这两个版本号就是版本边界（更细一点的话可以把每次提交都看作一个版本），Bug 只可能在其中出现。...代码边界又可以叫组件边界、模块边界等等，我们发现导航菜单出了问题，那么只需要关心这个组件代码的改动。...在这个列表中改动点还挺多，但我们只需要关心 Menu 菜单组件，所以很快找到了这一行： ?
即便是熟悉以上规则的设计师设计出来的导航菜单也有可能会被用户忽视，因为他们很难客观地评价自己的作品——尤其是碰上比较主观的设计标准时，比如哪个UI元素应该拥有更明显的视觉效果。...要记住导航菜单并不是拿自造词和行话去忽悠人的。请使用可以准确描述网站内容和特征的术语。 链接标签要容易阅读。减少用户阅读菜单具体内容的时间，如使用左对齐的垂直菜单、或将关键词前置。...对于大型网站来说，让用户通过导航菜单预览子级内容。对于喜欢挖掘网站各层级内容的典型用户来说，下拉菜单可以让用户快速浏览、节省时间。 为息息相关的内容提供本地导航。...图像、颜色等元素可以帮助用户理解菜单选项，但也要确保这些图形起的是积极作用（至少不能让操作变得更难）。 导航菜单要易于操作 菜单选项要够大、方便点击。...鼠标悬停触发的下拉菜单呈现时间太过短暂会给用户带来挫败感，因为用户还没来得及点击菜单里的某个链接的时候，下拉菜单就消失了。另外，太长的垂直导航菜单也不利于底部选项的点击，除非滚动屏幕。
运行的效果如下 （二）带有菜单栏，菜单条，和子菜单的窗体程序 首先要知道几个常见类和函数 JMenuBar：代表菜单条，他需要被设置给JFrame窗体中 JMenu：代表菜单，他需要被放在菜单条中...JMenu: add(JMenuItem)；//在菜单中添加菜单项 add(JMenu)；//在菜单中添加子菜单 addSoearator()；//添加分割线 JMeunItem: 其的双参构造方法...：第一个是菜单项名字，第二个是菜单项图标 /** * 创建一个带菜单条，菜单项，子菜单的窗口 */ public class MainForm extends JFrame {...，即作为其子菜单 submenu.add(new JMenuItem("子菜单项1",new ImageIcon("/home/zuikaku/图片/1.png")));//子菜单中添加菜单项...submenu.add(new JMenuItem("子菜单项2",new ImageIcon("/home/zuikaku/图片/1.png")));//子菜单中添加菜单项
明明我们只切了8个图片，为什么一下子又变成了30个切图？ ? （3） 这是因为我们在切图的时候，PS自动的添加了一些切图。...而且这些自动生成的切图我们是不能删除的。 ? （4）有时候看着这么多切图觉得挺烦，那可不可以只显示我们自己切的图？答案是肯定的。...参考线的添加有两种方式： 第一种： （1）打开菜单“视图”->“新建参考线”，弹出“新建参考线”。参考包括“取向”（水平或垂直）、“位置”。...现在把分组名称重新改为“Address.png”。...现在我想把下面的图标保存为svg格式，我们仅需要把图层文件名字改为“Icon.svg”。
ANT DESIGN PRO 是什么？...大体就是将导航菜单改成 Nav 模式，将下面的内容模块全部让出给子应用，这样可以将主体发挥空间全部交给各个子应用来管理。...子应用的模板，将 Header 模块全部删除，保留侧边路由模块，所以子应用单独开发的时候，可以拥有自己最大的自定义性，可以独立开发。 ? 子应用在加载到主应用的时候，则如下图所示： ?...主应用加载了子应用之后，后续的界面渲染可以全部交给子应用自己管理。...路由权限改造 UmiJS 自带的路由权限校验是会将不符合用户的权限的页面引导到空白或者其他页面，我们这里稍微改造一下，引入动态路由与菜单，如果用户没有该权限的时候将不会暴露菜单与路由出去。
一、垂直导航菜单的制作 1、基本的样式清除： *{margin:0;padding:0} 2、无序列表圆点去除： ul{list-style:none} 3、下划线去除： a{text-decoration...org/1999/xhtml"> 垂直导航菜单...垂直菜单改为水平菜单：ul的width去掉,li进行float:left；a标签的文本缩进改为文本居中： text-align:center; <html xmlns="http://www.w3...1、用无序列表构建<em>菜单</em>；ul/li 2、<em>垂直</em><em>菜单</em>转变为水平<em>菜单</em>：float:left； 3、在制作圆角<em>菜单</em>时，背景图片贴在标签上； -------> 雪碧图的应用--- background-position...6、line-height:40px；改变文字高度来满足其<em>垂直</em>居中 7、背景图片的偏移：background-position:0 -30px; 对于Y来说：-是向上移，+是向下移， 对于X来说：-是向左移
比如弹窗组件不能在自己的内容中写死标题和页面的内容， 在页面上使用该组件时， 页面 动态向指定组件内占位传入“一些内容”，组件会把它们插入到它想要的地方！ ...比如ng-zorro中，大量这样用法，https://ng.ant.design/components/card/zh#components-card-demo-simple ? ?...比如要定义菜单组件，涉及到两类组件，1是叶子菜单项，2是文件夹菜单项。 下图是看zorro的ISSUE中的一个截图， 其写法我不知道对不对。 递归组件的标准实践待确认！！！ ?...的变量接收） 3、子组件如何使用这个引用变量（ 在模版中，用ngTemplateOutlet 绑定这个变量即可） 4、引用元素从主页面上来， 如何把子组件的数据（即子组件中上下文）传递给这个引用元素上来...组件为了灵活，一部分内容定义在组件之外的（即主页面上）,当它插入到子组件中的时候，必然要显示子组件内的一些数据，它才有意义。
单击第一个按钮即可弹出图中的浮动框，该浮动框与Align子菜单包含的菜单项完全一样，只是通过该按钮可以同时添加多个约束。...松开鼠标即可看到弹出菜单。 ? 由于在界面上拖出的蓝线为斜线，因此弹出菜单既可设置两个UI控件在水平方向上的相对布局关系，也可设置在垂直方向上的相对布局关系。...如果在界面上拖出的蓝线为垂直竖线，那么Xcode将弹出如下图所示的菜单。 ?...可以看出，如果在两个具有兄弟关系的UI控件之间拖出蓝色的竖线，那么Xcode弹出的菜单将只能设置这两个UI控件在垂直方向上的约束关系。 如果拖出的蓝线为水平横线，那么Xcode将弹出如下所示菜单。...提示：如果在两个具有父子关系的UI控件之间拖出垂直的蓝线，那么Xcode弹出的菜单将只能设置两个UI控件在垂直方向上的布局约束；如果在两个具有父子关系的UI控件之间拖出水平的蓝线，那么Xcode弹出的菜单将只能设置两个
UI Options(界面设置) 用户界面选项 Show tree indent guides(显示树状缩进级别的垂直线) 在树状视图中（例如在“项目”工具窗口中）显示标记缩进级别的垂直线。...开启前效果: 开启后效果: Smooth scrcolling(平滑移动) 作用: 开启后用鼠标中键在代码区上下滑动更流畅(个人感觉),这个因人而异 Use smaller indents in trees...Antialiasing(抗锯齿) IDE: 选择要应用于IDE的哪种抗锯齿模式（包括菜单，工具窗口等） Subpixel(子像素): 用于LCD显示器，并利用彩色LCD上的每个像素都由红色，绿色和蓝色子像素组成...LCD显示器或垂直放置的显示器。...，比如:git菜单 可以如图所示按 alt+9即可打开 Side-by-side layout on the left(左侧并排布局) 被附连到顶部和底部边缘中的两列，而不是堆叠在彼此的顶部上显示垂直工具窗口
领取专属 10元无门槛券
手把手带您无忧上云
