Antd Pro V4 样式修改大全(有图有真相)
Antd Pro V4 样式修改大全
一、左侧菜单的logo和标题
(1)logo修改
BasicLayout.jsx
import logo from '../assets/example.jpg'; // 替换成自己的logo即可
(2)文字标题
defaultSettings.js
const proSettings = {navTheme: 'dark',// 拂晓蓝primaryColor: '#1890ff',layout: 'side',contentWidth: 'Fluid',fixedHeader: false,fixSiderbar: true,colorWeak: false,menu: {locale: false,},title: '试验', // 在此处修改成自己的标题pwa: false,iconfontUrl: '',
};
export default proSettings;
二、title文字和图标
src/pages/document.ejs
<title>试验</title>
<link rel="icon" href="<%= context.config.publicPath +'example.jpg'%>" type="image/x-icon" />
为了方便大家修改,笔者在此处再插入一些ejs的知识点
- 标签:<%= 输出数据到模板(输出是转义 HTML 标签)
- context 函数执行时的上下文环境
其它内容如果大家感兴趣的话可以自行翻阅:
EJS 模板引擎
Umi JS 开发技巧
此处笔者是将example.jpg放在了cofig文件夹下,大家可以自行更改,换成assets或其它文件夹下
三、页面刷新的时候出现的Pro图标
src/pages/document.ejs
<img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
//对应的是大的Pro图标<div class="page-loading-warp"><div class="ant-spin ant-spin-lg ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div></div><div style="display: flex; justify-content: center; align-items: center;"><imgsrc="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"width="32"style="margin-right: 8px;"/> //对应蚂蚁金服的LogoAnt Design</div>
笔者在公司刷新的时候还会跳出来,不知道为毛线在家里就截不到图了,但是修改的话的确就是在这里,大家可以自行修改
四、主题颜色
(1)主题颜色
config/defaultSettings.js
const proSettings = {navTheme: 'light', //只有dark和light两种。。。。
};
export default proSettings;
五、更换登录界面背景图片
src/layouts/UserLayout.less
@media (min-width: @screen-md-min) {.container {background-image: url('../assets/bg.jpg'); //修改成自己的背景图片background-repeat: no-repeat;background-size: 100%;}.content {padding: 32px 0 24px;}
}
六、页脚标注
layouts/BasicLayout.jsx
const defaultFooterDom = (<DefaultFootercopyright={`自己填写相关公司的信息`}links={[// {// key: 'Ant Design Pro',// title: 'Ant Design Pro',// href: 'https://pro.ant.design',// blankTarget: true,// },// {// key: 'github',// title: <GithubOutlined />,// href: 'https://github.com/ant-design/ant-design-pro',// blankTarget: true,// },// {// key: 'Ant Design',// title: 'Ant Design',// href: 'https://ant.design',// blankTarget: true,// },]}/>
);
感谢阅读,欢迎批评指正,希望大家能够在追求卓越中不断进步,让优秀成为一种习惯~
Antd Pro V4 样式修改大全(有图有真相)相关推荐
- Antd Pro v4入门
Antd Pro v4入门 什么是Ant Design Pro Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础 ...
- Antd select dropdown 样式修改
Antd select dropdown 样式修改 官网提供了dropdownClassName属性,链接 测试代码: <template><div class="sele ...
- Antd Pro V4 protable详解(ps:踩坑日记)
Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...
- el-table使用与样式修改大全
目录 一.样式修改篇 修改头部背景 修改行背景 修改斑马线背景(奇偶行背景)
- vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用 场景复现 实际操作 解决a-table表格padding过宽 知识调用 文章中可能会 ...
- 【转】ECharts各种图表文字样式修改大全
参考文章: https://www.cnblogs.com/webtall/p/7238593.html https://bbs.csdn.net/topics/392285139 这篇文章主要讲述E ...
- UmiJS TypeScript Ant Design Pro v4 从零开始实战教程(63 个视频)
UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程(63 个视频) Antd Pro 是国内最流行的前端后台框架,使用它可以轻易搭建一个超级 ...
- antd pro V5调整标题,菜单字体样式
项目场景: 需要修改Antd Pro标题和菜单字体的大小和样式. 解决方案: Antd Pro原始默认字体是14px:通过控制台的小箭头,去查找菜单字体的className.在样式栏里面点击对应的cs ...
- antd中默认的样式修改不了咋办呢,捉急呀
使用antd,想要修改默认的样式,一直无法生效?? 1.添加类名或者样式style 直接在相应组件上添加想要的样式相应的属性style,但是这种方式经常不会生效. 2.使用:global{}属性覆盖默 ...
最新文章
- MSDN Magazine推出Custom Report Item示例ProgressTracker CRI
- Delphi程序的主题(Theme)设置
- 用VirtualWifi软件实现无线网卡同时连接多个AP。
- [Swift]LeetCode1147. 段式回文 | Longest Chunked Palindrome Decomposition
- mysql修改的值子查询语句_MySQL的SQL语句 - 数据操作语句(13)- 子查询(13)
- 进程相关概念与多线程的基本使用
- 【Flink】Flink 多并行度下的 watermark触发机制
- Java学习第七课...枚举.自动装箱.静态导入...-asp.net关注
- 【数据库系统设计】关系数据库标准语言SQL(2)
- Fastjson blacklist
- .NET代码混淆——开源.net 混淆器ConfuserEx介绍
- vmware死机,mvx.exe进程关不掉情况
- 缓存投毒 -- 学习笔记
- php中column函数,PHP array_column() 函数用法及示例
- 【博文笔记】Attentive Reader\Impatient Reader:机器阅读理解之开山之作Teaching Machines to Read and Comprehend
- python画五角星-Python的画五角星
- 某技术总监认为处女座码农要重用,并给出3点原因,你认同么?
- sqlserver无法连接的localhost解决方案
- 7-2 统计英文字母和数字字符[2]
- 全概率公式与贝叶斯公式-机器学习