如何更新 Ionic 4 中 ion-searchbar 的高度？

Question

我正在尝试使用 <ion-searchbar> 在 Ionic 4 中开发搜索功能。我遇到的问题是搜索栏的高度，我无法操纵它。我知道 Ionic 4 是基于 Web 组件的，它将每个组件都包裹在阴影 DOM 中，但是 <ion-searchbar> 似乎没有阴影 DOM ，如下所示：

与阴影 DOM 在节点内可见的其他组件不同，例如：

这让我觉得我可以在 <ion-searchbar> 中用 class searchbar-input-container 覆盖 div 但我不能，甚至 Ionic 官方文档也没有涵盖任何属性或可以达到此目的的变量。请帮忙。

Answer 1

在经历了很多麻烦之后，我尝试了一个解决方案，有些人也认为它是一种解决方法。我使用 CSS 的 transform: scale 来扩展我的 <ion-searchbar>。所以代码现在变成：

ion-searchbar {        
    transform: scale(1.2); // Can also scale individually with scaleX() and scaleY()
    margin: 0 auto;
    width: 80%; // To avoid pixelate effect that occurs with scaling
}

您也可以使用 zoom CSS 属性作为 zoom: 1.2 但根据 MDN docs，建议使用变换超过缩放。

这允许我们在不使用 class searchbar-input-container.

访问 div 的情况下增加高度

如何更新 Ionic 4 中 ion-searchbar 的高度？

How to update the height of ion-searchbar in Ionic 4?

ionic-framework

angular

ionic4