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测试得到的结论,真机上还有待测试。

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    操作系统基础知识
    os库基本介绍
    原型模式
    ASP .NetCore 部署500错误 查看异常详情
    css设置文本自动换行
    SqlServer数据库链接字符串
    Json列表数据查找更新
    VB中将类标记为可序列化
    VB 性能优化点
    参加公司工作总结会要准备的内容 IT 技术部
  • 原文地址:https://www.cnblogs.com/johnjackson/p/12256720.html
Copyright © 2011-2022 走看看