如何在 Ionic 4 中更新离子搜索栏的高度？答案

【问题标题】：How to update the height of ion-searchbar in Ionic 4?如何在 Ionic 4 中更新离子搜索栏的高度？
【发布时间】：2019-12-23 10:07:09
【问题描述】：

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

与其他在节点中可见影子 DOM 的组件不同：

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

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

在经历了很多麻烦之后，我尝试了一种解决方案，某些人也可以将其视为一种解决方法。我使用 transform: scale 的 CSS 来扩展我的 <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，建议使用transform 而不是zoom。

这允许我们在不使用类searchbar-input-container 访问div 的情况下增加高度。

【讨论】：