如何使Ionic中的导航栏（ion-nav-bar）透明？

debugcn 发表于 Dev

火星罗伯逊

我正在使用离子sidemenu模板：ionic start myApp sidemenu

它使用一些有用的工具和默认配置生成一个示例项目。

我正在尝试实现使标题栏（ion-nav-bar）透明的内容。

这是the人：https ://plnkr.co/edit/qM3YsJ ? p = preview

默认情况下，它使用（menu.html）

<ion-nav-bar class="bar-stable">

一周前，我在Ionic论坛上问了这个问题-https: //forum.ionicframework.com/t/how-to-make-nav-bar-transparent/49250-我什至设法找到了解决方法，但它的确很多如果仅使标题（导航）栏透明，则更容易。

这是有效的codepen示例：http ://codepen.io/Samurais/pen/dPRMKL

问题是-我替换1.0.0-beta.1为1.2.4它的那一刻不起作用了。

编辑：

很多人都在暗示background-color: transparent !important-明显-但它不是小事，由于许多潜在的因素，定位，translate3D，z-index的......我的意思是，如果它是微不足道的我大概弄明白现在。

许多人建议隐藏导航栏，这正是我所做的：

我什至设法找到了解决方法

但这是一种解决方法，因为我正在重新创建许多不很酷的默认本机元素。

最终...编辑Plunker需要10秒钟。花费20秒进行分叉，获取URL并使用实际的工作URL进行回复，而不是未经测试的解决方案。

感谢您教我如何成为更好的沟通者。我认为声明“我想使导航栏透明”和上下文（链接，插件，替代解决方案，我在论坛上的帖子）明确了，显然我需要提高沟通技巧。

火星罗伯逊

更新的plnkr：https ://plnkr.co/edit/qM3YsJ ? p = preview

ion-content.has-header {
  top: 0;
}

.bar {
  background-color: transparent;
}

.bar-header {
  border-bottom-width: 0px;
}

（默认情况下，支持透明类会更清洁）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-19

我来说两句

0条评论

登录后参与评论

来自分类Dev