Ant Design Pro项目Popover位置微调
前情
公司有经常需要做一些后台管理页面,我们选择了Ant Design Pro,它是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案。
产品效果图
最新接到的一个后台管理界面需求,需要使用到Popover,但是在使用时发现那箭头位置不符合预期:
理想:
实际:
解决方案
从官网文挡并没有找到相关的调整位置的配置项,一开始想通过加margin、transform都失败告终,最后发现可以通过配置align的offset可以实现位置微调。
关键代码:
<Popover
align={{
offset: [18, 10]
}}
placement="bottomRight"
content={content}
overlayClassName="comments-more-wrap"
trigger="click"
open={openReportBtn}
onOpenChange={handleOpenChange}
>
...
</Popover>
Ant Design Pro项目Popover位置微调的更多相关文章
- Ant Design Pro项目打开页设为登录或者其他页面
Ant Design Pro项目打开页设为登录或者其他页面 一.打开页设为登录页 首先找到utils包中的authority文件,在该文件中找到如下代码: export function getAut ...
- 【后台管理系统】—— Ant Design Pro 项目爬坑(一)
1.表单rule中可以分对象处理不同规则 <FormItem label="类型名称" {...formLayout}> { form.getFieldDecorato ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
- 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)
前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...
- 使用ant design pro搭建项目
脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- Ant Design Pro (中后台系统)教程
一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么: https://www.cnblogs ...
- Ant Design Pro V5 与 IdentityServer 实现 Password 模式的登录
最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速 ...
- ant design pro (十五)advanced 使用 API 文档工具
一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
随机推荐
- 一个 tomcat 下如何部署多个项目?附详细步骤
一个tomcat下如何部署多个项目?Linux跟windows系统下的步骤都差不多,以下linux系统下部署为例.windows系统下部署同理. 一.不修改端口,部署多个项目 清楚tomcat目录结构 ...
- Spring —— AOP(面向切面编程)
AOP(Aspect Oriented Programming)简介 面向切面编程,一种编程范式,指导开发者如何组织程序结构 作用:在不惊动原始设计的基础上为其进行功能增强 Spring理念:无入侵式 ...
- 76.最小覆盖子串 Golang实现
题目描述: 给你一个字符串 s .一个字符串 t .返回 s 中涵盖 t 所有字符的最小子串.如果 s 中不存在涵盖 t 所有字符的子串,则返回空字符串 "" . 注意: 对于 t ...
- 伯克利函数调用排行榜(BFCL)
自 2022 年底以来,大语言模型(LLMs)凭借其执行通用任务的强大能力,成为众人关注的焦点.不仅限于聊天应用,将这些模型应用于开发各类 AI 应用和软件(如 Langchain, Llama In ...
- LeetCode 564. Find the Closest Palindrome (构造)
题意: 给一个数字n 求离n最近(且不等)的回文串 存在多个答案返回最小的 首先很容易想到 将数字分为两段,如 12345 -> 123/45,然后将后半段根据前面的进行镜像重置 123/45 ...
- Blazor与IdentityServer4的集成
本文合并整理自 CSDN博主「65号腕」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. Blazor与IdentityServer4的集成(一) IdentityS ...
- KPTI——可以缓解“熔断” (Meltdown) 漏洞的内核新特性
Linux 内核修复办法:内核页表隔离KPTl(kernel page table isolation) 每个进程一张页表变成两张:运行在内核态和运行在用户态时分别使用各自分离的页表 Kernel页表 ...
- 怎么封装axios
首先,单独创建一个request的js文件,导入axios 然后,创建 axios 实例 request = axios.create 可以写基本地址,超时时间等: 后面可以添加拦截器,可以在请求拦截 ...
- vue-template-admin 模板
1. 替换登录页的样式 2. settings.js 3. layout 文件夹 4. store 文件夹 4.1 app.js
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit(3)
1.问题描述: compatibleSdkVersion升级到5.0.0(12)之后,调用坐标系转换API:map.convertCoordinate(mapCommon.CoordinateType ...