当前位置:网站首页>MUI底部导航的样式修改
MUI底部导航的样式修改
2022-07-02 05:54:00 【Serena_tz】
遇到的问题:想要为MUI的底部导航栏加一个上边框和上内边距均不显示,但是操作导航栏的别的样式就会显示。最后,才发现是一开始为导航栏预留的问题不够。因此,在修改样式没有反应时我们应该考虑是否被别的元素遮挡显示不出来。
使用MUI的底部导航栏想要修改导航顶部分割线。
.mui-bar-tab {
background-color: #fff;
height: 49px;
box-shadow: 0px 0px 8px 0px rgba(102,102,102, 0.6);
padding-top: 5px;
}
添加子页面的时候要为底部导航预留位置。
var firstBack = null; //记录第一次点击返回事件
let plusReadyChildren = ['home']; //记录已经plusReady的子页面的id。子页面plusReady后会写入此数组
var styles = {
top: '0px',
bottom: '50px',
scrollIndicator: 'none'
};
如上bottom的值为50px,因此底部导航栏只有50px的位置。
设置导航栏分割线最好使用线条,因为阴影有一个区域,不好为其预留位置展示。
边栏推荐
- idea开发工具常用的插件合集汇总
- servlet的web.xml配置详解(3.0)
- [paper translation] gcnet: non local networks meet squeeze exception networks and beyond
- Matplotlib double Y axis + adjust legend position
- Reading notes of cgnf: conditional graph neural fields
- 死磕大屏UI,FineReport开发日记
- Cube magique infini "simple"
- Zzuli:1062 greatest common divisor
- 3D printer G code command: complete list and tutorial
- 测试 - 用例篇
猜你喜欢

Can't the dist packaged by vite be opened directly in the browser

Oled12864 LCD screen

Test case

死磕大屏UI,FineReport开发日记

Eco express micro engine system has supported one click deployment to cloud hosting

Minimum value ruler method for the length of continuous subsequences whose sum is not less than s

The Hong Kong Stock Exchange learned from US stocks and pushed spac: the follow-up of many PE companies could not hide the embarrassment of the world's worst stock market

ESP8266与STC8H8K单片机联动——天气时钟

【论文翻译】GCNet: Non-local Networks Meet Squeeze-Excitation Networks and Beyond

51单片机——ADC讲解(A/D转换、D/A转换)
随机推荐
Happy Lantern Festival | Qiming cloud invites you to guess lantern riddles
PHP 开发与测试 Webservice(SOAP)-Win
【C语言】筛选法求素数
[whether PHP has soap extensions installed] a common problem for PHP to implement soap proxy: how to handle class' SoapClient 'not found in PHP
Fundamentals of software testing
页面打印插件print.js
脑与认知神经科学Matlab Psytoolbox认知科学实验设计——实验设计四
【LeetCode】Day92-盛最多水的容器
2022-2-14 learning xiangniuke project - Section 6 displays login information
Several keywords in C language
图片裁剪插件cropper.js
PHP parent
Balsamiq wireframes free installation
15 C language advanced dynamic memory management
Cube magique infini "simple"
Oled12864 LCD screen
Web页面用户分步操作引导插件driver.js
TI毫米波雷达学习(一)
数理统计与机器学习
How to write good code - Defensive Programming Guide