ant design Menu折叠箭头修改大小

由于antd原本自带的折叠箭头太小,UI设计要求改大一点,

想了很多办法都没办法去改变,后来发现,这个箭头是由左右两部分组成的,及结构为/+\,所以设置宽度且针对平移作出修改,最终修改为16px*16px大小,也算是达成了设计要求,改后效果如下

 上代码:

//菜单打开状态/\箭头左/
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before{
  width: 10px;
  transform: rotate(45deg) translateX(4.5px);
}
//菜单打开状态/\箭头右\
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after{
  width: 10px;
  transform: rotate(-45deg) translateX(-4.5px);
}
//菜单收起状态\/箭头左\
.ant-menu-inline-collapsed .ant-menu-submenu-arrow::before, .ant-menu-submenu-inline .ant-menu-submenu-arrow::before{
  width: 10px;
  transform: rotate(-45deg) translateX(4.5px);
}
//菜单收起状态\/箭头右/
.ant-menu-inline-collapsed .ant-menu-submenu-arrow::after, .ant-menu-submenu-inline .ant-menu-submenu-arrow::after{
  width: 10px;
  transform: rotate(45deg) translateX(-4.5px);

视图审查是真的难搞,有很多时候需要想很多办法,希望能帮到同样抓耳挠腮的小伙伴,哈哈,如果有更好的办法建议可以沟通,谢谢! 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值