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

Question

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

我的ionic searchbar代码如下：

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

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

How to move search icon of search-bar at right side of search bar in ionic 4

javascript

searchbar

typescript

angular

ionic4