React-antd组件库 - 让Menu子菜单项水平排列 - 下拉菜单排序 - 自定义子菜单展示方式

ops/2024/12/18 0:34:25/

效果图

依据

导航菜单 Menu - Ant Design为页面和功能提供导航的菜单列表。icon-default.png?t=O83Ahttps://ant-design.antgroup.com/components/menu-cn#submenutype关键:SubMenuType的popupClassName是子菜单样式 = hover弹出二级菜单的dom外部类名

步骤(思路1)

  1. <Menu items={xxItems}/>

  2. 定义选项,指定二级菜单的popupClassName,可多个

    const xxItems = [{label: '尺寸',key: 'size',popupClassName: 'xxxclass max-w-sm',children: [{key: 's1',label: '1:1'},{key: 's2',label: '3:4'}]}
    ];

  3. 在自己的css中定义"xxxclass"以及二级菜单弹窗的dom的样式,下面有ul > li,设置:

    .xxxclass {width: 100% !important;
    }.xxxclass>ul {display: flex;flex-wrap: wrap;
    }
    .xxxclass>ul>li {display: inline-block;width: auto!important;
    }

  4. OK

步骤(思路2)

不要把弹出窗塞到menu,自己另写一个独立的悬浮DOM,使用变量控制显示;

然后:menu的某按钮的点击事件 > 修改变量 > 显示悬浮DOM > 自己关闭此DOM

坏处:... 不大好衔接

好处:随便定义样式,图标、图片、标题随便弄


http://www.ppmy.cn/ops/142766.html

相关文章

UE5 C++ Subsystem 和 多线程

一.Subsystem先做一个简单的介绍&#xff0c;其实可以去看大钊的文章有一篇专门讲这个的。 GamePlay框架基础上的一个增强功能&#xff0c;属于GamePlay架构的范围。Subsystems是一套可以定义自动实例化和释放的类的框架。这个框架允许你从5类里选择一个来定义子类(只能在C定义…

更新数据时Redis的操作

一般做法是在数据库更新后删除Redis中对应的缓存数据&#xff0c;而非更新数据。那么为什么要这么做呢&#xff1f; 以下是一些拙见 场景使用 金融交易系统&#xff1a;在金融领域&#xff0c;数据的准确性至关重要。任何数据不一致都可能导致严重的财务损失。因此&#xff0…

【保姆级】Mac如何安装+切换Java环境

本文从如何下载不同版本的JDK,到如何丝滑的切换JDK,以及常见坑坑的处理方法,应有尽有,各位看官走过路过不要错过~~~ 下载⏬ 首先上官网: https://www.oracle.com/ 打不开的话可以使用下面👇这个中文的 https://www.oracle.com/cn/java/technologies/downloads/a…

Jmeter如何对UDP协议进行测试?

Jmeter如何对UDP协议进行测试&#xff1f; 1 jmeter-plugins安装2 UDP-Protocol Support安装3 UDP协议测试 1 jmeter-plugins安装 jmeter-plugins是Jmeter的插件管理器&#xff1b;可以组织和管理Jmeter的所有插件&#xff1b;直接进入到如下页面&#xff0c;选择如图的选项进…

中后台管理信息系统:Axure12套高效原型设计框架模板全解析

中后台管理信息系统作为企业内部管理的核心支撑&#xff0c;其设计与实现对于提升企业的运营效率与决策能力具有至关重要的作用。为了满足多样化的中后台管理系统开发需求&#xff0c;一套全面、灵活的原型设计方案显得尤为重要。本文将深入探讨中后台管理信息系统通用原型方案…

Dubbo的应用及注册和SPI机制

Dubbo的应用及注册和SPI机制 Dubbo 的服务注册中应用级注册优化 Dubbo 的注册中心 Dubbo 支持很多种注册中心&#xff0c;支持的主流注册中心包括&#xff1a;ZooKeeper、Nacos、Redis Dubbo 需要引入注册中心依赖&#xff0c;并且配置注册中心地址&#xff0c;这里以 ZooK…

网络安全(1)等保软件部分常见检查项

1. 数据库必须有每周增量备份、每月全量备份 2. 用户注册密码应该限制8位以上&#xff0c;包含数字、大小写字母以及特殊字符 3. 需要使用HTTPS协议 4. 必须有系统日志、数据库日志&#xff0c;并且日志需要保留6个月以上 5. 用户输入密码错误需要30分钟锁定 6. 数据库管理…

高级Python游戏开发:打造一款平台跳跃游戏

平台跳跃游戏是经典的游戏类型,类似于《超级马里奥》风格,玩家控制角色通过跳跃、移动等操作避开障碍物并完成目标。本项目用Pygame开发一个高级的2D平台跳跃游戏。 一、游戏特色 玩家控制:控制角色左右移动和跳跃。平台生成:生成多个平台,玩家可以跳到平台上。障碍物:动…