zoukankan      html  css  js  c++  java
  • ionic4 标题栏 ion-toolbar 默认 底部会显示一个底边框 解决

    在ionic的官方文档(https://ionicframework.com/docs/api/toolbar)中提到:

    In md mode, the <ion-header> will receive a box-shadow on the bottom, and the <ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header> will receive a border on the bottom, and the <ion-footer> will receive a border on the top.

    大意就是在md模式下ion-header底边会显示一个阴影,ion-footer会在顶边显示一个阴影,在ios模式ion-header会显示一个底边,而ion-footer会显示一个顶边。

    这段说明是在ion-toolbar组件中的,而内容说的就是ion-header,我不知道是不是官方的错误。

    在chrome浏览器下测试,我是用的macbook,并且开发者工具中选的手机类型是iphone,所以<ion-toolbar> 默认被渲染为ios模式 。

    但不管是ios,还是md模式,标题栏下边都会显示一个黑边。而且不管我怎么设--border-0 还是 border-style: none,都不能彻底去掉。

    经过我不断的尝试,最后发现只要给ion-toolbar加上以下两个样式就可以去掉这个下边框:

    --border- 0;
    --min-height: 50px;

    对于iphone X, --min-height: 设为 小于45 或大于45的偶数,都可以。

    如果是要对全局进行设置,则修改 src/global.scss, 在其中加上

      ion-toolbar {
        --min-height: 50px;
        --border-width: 0 !important;
      }

    以上都是在PC端的Chrome测试得到的结论,真机上还有待测试。

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    [solution]xdebug正确配置,但不显示错误信息
    SIGCHLD信号
    sigsuspend
    信号引起的竞态
    智力面试题
    可重入和不可重入
    信号—信号处理函数(捕捉)
    PCB信号集
    信号产生的原因:
    信号初步
  • 原文地址:https://www.cnblogs.com/johnjackson/p/12256720.html
Copyright © 2011-2022 走看看