[英]How to move search icon of search-bar at right side of search bar in ionic 4
I'm Developing a Hybrid app using ionic-4
.我正在使用ionic-4
开发混合应用程序。 I have my simple search page and I want to move the search icon to the right side of the ion-searchbar
component.我有一个简单的搜索页面,我想将搜索图标移动到ion-searchbar
组件的右侧。 I have tried this with different CSS
rules but i didn't find any solution.我用不同的CSS
规则尝试过这个,但我没有找到任何解决方案。
my ionic searchbar code is as below:我的离子搜索栏代码如下:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-searchbar showCancelButton="never"></ion-searchbar>
</ion-toolbar>
</ion-header>
Since the search-bar component does not have shadow dom enabled , you can manipulate the CSS of the inner components just fine.由于搜索栏组件没有启用 shadow dom ,您可以很好地操作内部组件的 CSS。 You just need to reset the ion-icon
left
CSS property and make sure you are doing this inside global.scss
:您只需要重置ion-icon
left
CSS 属性并确保您在global.scss
中执行此global.scss
:
ion-searchbar ion-icon {
right: 16px !important;
left: auto !important;
}
If you set dir="rtl"
on the html
tag inside index.html
, you can see that ionic does this the same way when the icon needs to be flipped:如果您在index.html
的html
标签上设置dir="rtl"
,您可以看到 ionic 在需要翻转图标时以相同的方式执行此操作:
[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md {
left: unset;
right: unset;
right: 16px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.