html - 如何删除 Ion-Toolbar 上的边框?
问题描述
我需要帮助从Ionic v4 (4.0.9) 中ion-toolbar
删除边框。ion-header
我的目标是删除这个:
在我的代码中,我有一个ion-header
with two ion-toolbar
。我已经尝试了所有no-border
里面的属性ion-header
和ion-toolbar
.
我还尝试将属性添加到页面的 .scss 中,如下所示:
<ion-header no-border-bottom no-border-top no-border>
<ion-toolbar color="dark" no-border-bottom no-border-top no-border>
<img src="../../assets/icoUserLogin.png" alt="Logo Aikox" slot="start" witdh="20%" />
<ion-title slot="primary">
Test
</ion-title>
</ion-toolbar>
<ion-toolbar class="ToolbarVerde" color="medium" no-border-bottom no-border-top no-border>
<ion-buttons slot="start">
<img src="../../assets/icoListado.png" alt="Icono Listado" slot="start" width="70%" />
</ion-buttons>
<ion-title>
<span>test</span>
<br />
<span>test</span>
</ion-title>
<ion-buttons slot="primary">
<ion-button (click)="Nuevo()">
<img src="../../assets/icoRefresh.png" alt="Icono Recargar" width="70%" /><br />
</ion-button>
<ion-button (click)="Nuevo()">
<img src="../../assets/icoNew.png" alt="Añadir Parte de Trabajo" width="70%" /><br />
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
.toolbar-background{
--border-width: 0px !important;
border: 0 !important;
}
.toolbar-container{
--padding-top: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
--padding-bottom: 0px !important;
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
}
.ToolbarVerde{
--padding-top: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
--padding-bottom: 0px !important;
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
}
但这不起作用。
解决方案
如果有人正在寻找 Ionic 5 解决方案,请执行以下操作:
<ion-header class="ion-no-border">
</ion-header>
它消除了边框和阴影。
推荐阅读
- performance-testing - 性能测试 - 是否有任何用于在浏览器中呈现网页的性能测试自动化工具?
- significant-digits - 如何设置单元格范围以自动显示数据的准确性?
- ruby - 在不准确的情况下获得回报
- javascript - 用户计算机中本地文件的绝对路径
- java - Gauge - 在使用 -DinParallel=true 对 csv 中的每一行运行规范之前
- c++ - 如何将数字运算符作为参数传递?
- python - 在 Python3.9 中导入 pg 出错
- java - 使用 JDBC 在一对多中获取“多”
- javascript - 为什么我的不和谐机器人在 setInterval 和 setTimeout 函数内部时从 mongoDB 返回结果未定义?
- javascript - reactjs - 如何在javascript中添加点击事件监听器?