若依如何将侧边栏导航改为顶部导航

本文指导如何通过修改若依系统的代码,将默认在侧面的导航栏调整到顶部。步骤包括:1)在Sidebar组件的index页面设置display属性为flex;2)修改layout/index页面的sidebar类名;3)调整styles/variables.scss中侧边栏宽度;4)最终实现顶部导航效果。
摘要由CSDN通过智能技术生成

若依系统的导航栏默认是在侧面的,如何改为在顶部呢?
这篇我们通过修改代码的方式来将导航栏放到顶部。

1、首先找到侧边栏组件页面

Sidebar下面的index页面,将mode改为horizontal,然后添加一个样式,如下面代码所示。

<style lang="scss" scoped>  
.menu{  
  display: flex;  
}  
</style>

此时页面是这种效果:

在这里插入图片描述

2、找到layout文件夹下的index页面

修改<sidebar> 标签下class的类名为任意的名字,就能变为顶部导航栏。

这个sidebar标签放置的位置不同导航栏的位置也会有差别,具体效果如下面两图所示。
在这里插入图片描述

放在位置一就是下面的效果
在这里插入图片描述

放在位置二就是下面的效果

在这里插入图片描述

3、找到assets->styles文件夹下的variables.scss文件

最后再将侧边栏的宽度改为0px即可。

在这里插入图片描述

4、最终效果:

在这里插入图片描述

这边只是提供一个大概的思路,其他的样式修改跟这个类似,比如将这个若依管理系统logo去掉或者放到左边 ,大家可以自己去摸索。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丿BAIKAL巛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值