如何在 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

由于搜索栏组件没有启用shadow dom，因此您可以很好地操作内部组件的CSS。您只需要重置ion-icon leftCSS 属性并确保在内部执行此操作global.scss：

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

如果你在里面的标签dir="rtl"上设置，你可以看到当图标需要翻转时，ionic会以同样的方式执行此操作：htmlindex.html

[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md {
  left: unset;
  right: unset;
  right: 16px;
}