通过css在ion-title的影子根中选择“工具栏标题”

rqcrx0a6 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(110)

在Ionic中，ion-title组件的内容封装在阴影域中的一个额外的div中。这个div有class .toolbar-title集合。我如何通过scss选择器选择这个div来改变它的溢出行为？

我试过：

.toolbar-title { ... }
ion-title .toolbar-title
ion-title::shadow .toolbar-title { ... }
ion-title::shadow(div) { ... }

以及许多其他组合，包括：host &：：ng-deep选择器。
而且，是的，我知道，：：阴影和ng-deep是不赞成的。
我还知道ionic为此引入了css变量，但不幸的是不是为了overflow属性。
THX先行！

css

来源：https://stackoverflow.com/questions/65157492/select-toolbar-title-within-shadow-root-of-ion-title-via-css

2条答案

按热度按时间

z9gpfhce1#

shadowDOM的概念是您不能从外部用CSS触及其内容。
它是一个open shadowDOM，因此可以用JavaScript对其进行更改。

document.querySelector("ion-title")
        .shadowRoot
        .querySelector(".toolbar-title")
        .style
        .overflow = "initial";

赞(0）回复(0）举报 2022-12-15

djmepvbi2#

Ionicv6允许你使用CSS来定位和修改shadowDOM内容。
但是，您想要在shadowDOM中选择的元素需要公开一个part属性，例如ion-select元素：

<ion-select>
  #shadow-root
  <div part="placeholder" class="select-text select-placeholder"></div>
  <div part="icon" class="select-icon"></div>
</ion-select>

可使用以下命令选取placeholder元素：

ion-select::part(placeholder) {
  color: blue;
  opacity: 1;
}

遗憾的是，ion-title元素没有暴露任何阴影部分。您需要将ion-title的内容 Package 在容器中，以便能够修改它们：

<ion-title>
  <div class="content">
    <img src="..." />
    Hello World!
  </div>
</ion-title>

CSS：

.content {
  display: flex;
  align-items: center;
}

StackBlitz示例：https://stackblitz.com/edit/ionic-title-modification-8a1qst

赞(0）回复(0）举报 2022-12-15

我来回答

通过css在ion-title的影子根中选择“工具栏标题”

2条答案

相关问题

热门标签

最新问答