Как переместить значок поиска на панели поиска в правой части панели поиска в ioni c 4

Question

Я разрабатываю гибридное приложение, используя ionic-4. У меня есть страница простого поиска, и я хочу переместить значок поиска справа от компонента ion-searchbar. Я пробовал это с другими CSS правилами, но я не нашел никакого решения.

мой код поиска ioni c, как показано ниже:

<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

Поскольку в компоненте панели поиска не включен теневой домен , вы можете просто манипулировать CSS внутренних компонентов. Вам просто нужно сбросить свойство ion-icon left CSS и убедиться, что вы делаете это внутри global.scss:

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

Если вы установите dir="rtl" для тега html внутри index.html, вы можете видеть, что ioni c делает это так же, когда нужно щелкнуть значок:

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