如何在ionic 4中将搜索栏的搜索图标移动到搜索栏右侧

Question

我正在使用ionic-4开发一个混合应用程序。我有一个简单的搜索页面，我想将搜索图标移到ion-searchbar组件的右侧。我尝试过使用不同的CSS规则，但我没有找到任何解决方案。

我的离子搜索条形码如下：

<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>

​

Answer 1

由于搜索栏组件是does not have shadow dom enabled，所以您可以很好地操作内部组件的CSS。您只需重置ion-icon left CSS属性，并确保在global.scss中执行此操作

ion-searchbar ion-icon {
  right: 16px !important;
  left: auto !important;
}

如果您在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;
}