我正在尝试用<ion-searchbar>
在Ionic 4中开发搜索功能。我遇到的问题是搜索栏的高度,我无法操作它。我知道Ionic 4是基于Web组件的,它将每个组件都 Package 在一个shadow DOM中,但<ion-searchbar>
似乎没有shadow DOM,如下所示:
与其他组件不同的是,shadow DOM在节点中是可见的,例如:
这让我想到我可以在<ion-searchbar>
中用类searchbar-input-container
覆盖div
,但我不能,甚至Ionic官方文档也没有涉及任何可以实现这一点的属性或变量。请帮助。
2条答案
按热度按时间wvyml7n51#
在经历了很多麻烦之后,我尝试了一个解决方案,这个解决方案也被一些人认为是一个变通方案。我使用CSS的
transform: scale
来缩放我的<ion-searchbar>
。所以代码现在变成了:您也可以使用
zoom
CSS属性作为zoom: 1.2
,但根据MDN docs,建议使用transform而不是zoom。这允许我们增加高度,而无需访问
searchbar-input-container
类的div
。mtb9vblg2#
这是棘手的,但最后我找到了一个解决方案,这是相当简单。
基本上,在
ion-searchbar
中找到影响<input>
标记的类。查看正在应用的CSS属性,逐字提取整个类名,并在全局.scss文件中使用它。在我的情况下,它是: