如何更新Ionic 4中的离子搜索栏高度?

1bqhqjot  于 2022-12-09  发布在  Ionic
关注(0)|答案(2)|浏览(155)

我正在尝试用<ion-searchbar>在Ionic 4中开发搜索功能。我遇到的问题是搜索栏的高度,我无法操作它。我知道Ionic 4是基于Web组件的,它将每个组件都 Package 在一个shadow DOM中,但<ion-searchbar>似乎没有shadow DOM,如下所示:

与其他组件不同的是,shadow DOM在节点中是可见的,例如:

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

wvyml7n5

wvyml7n51#

在经历了很多麻烦之后,我尝试了一个解决方案,这个解决方案也被一些人认为是一个变通方案。我使用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,建议使用transform而不是zoom
这允许我们增加高度,而无需访问searchbar-input-container类的div

mtb9vblg

mtb9vblg2#

这是棘手的,但最后我找到了一个解决方案,这是相当简单。
基本上,在ion-searchbar中找到影响<input>标记的类。查看正在应用的CSS属性,逐字提取整个类名,并在全局.scss文件中使用它。
在我的情况下,它是:

.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios
{ 
     // whatever styles i want to increase the size... 
}

相关问题