Ionic ion-tabs 不断覆盖我的页面覆盖 Div

Posted 2023-03-16

【中文标题】Ionic ion-tabs 不断覆盖我的页面覆盖 Div

【英文标题】：Ionic ion-tabs Keep Overlaying My Page Overlay Div

【发布时间】：2022-01-11 14:17:34

【问题描述】：

我有标签，我正在尝试制作一个覆盖的 div...但是标签不能让这种情况发生

演示： https://stackblitz.com/edit/ionic-s6qxwm?file=pages/home/home.css

.overlay 
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;

<div class="overlay"></div>

SS：

请问我该怎么做才能覆盖整个视图？

【问题讨论】：

用户 ion-modal 在您的主页上，它将覆盖您的标签。

你试过 了吗？

【参考方案1】：

使用默认 ShadowDom 配置对 css 进行范围界定会妨碍您。你可以将你的风格放在全局（应用程序）中，它会起作用。

https://ionic-5b8qcq.stackblitz.io

    @Component(
      templateUrl: 'app.html',
      styleUrls: ['app.css'],
    )

您可以修改 ViewEncapsalation，但最好使用全局实用方法（服务或指令）来传播状态更改并更新适当的作用域元素。

【讨论】：

我希望 div 位于 home.html，因为我对它进行了很多操作。

在这种情况下，您将需要重组事物，因为默认的 shadow dom 配置会弄乱 css 范围 - viia shadow dom。我会看看我是否可以为您提供一些选项来更新答案；我认为您可以利用样式指令，更新组件 shadow dom 的默认配置，或者将其作为全局样式（离子方式）包含在内。我会用一些选项更新我的答案

让我和你一起想想......视图封装到家庭 css 怎么样？？

您是否愿意从家里触发一个可以传播到父控件（选项卡）或订阅该事件的处理程序的事件？这样就不必删除 Shadow dom。

您可以使用 ViewEncapsulation.None，但您需要确保引用 css 父元素。这是一个简单的例子来说明，但它当然可以改进。我不是建议这种方法，而是向您展示一个示例与全局样式规则方法-stackblitz.com/edit/ionic-5b8qcq?file=pages/home/home.css