Ioni c 4+ Angular: значок поиска на панели поиска ion и на панели инструментов не совпадает с событием onfocus - PullRequest
Новая
       47

Ioni c 4+ Angular: значок поиска на панели поиска ion и на панели инструментов не совпадает с событием onfocus

0 голосов
/ 20 января 2020

Я поместил ионную поисковую панель в свою ионную панель инструментов. Все выглядит нормально, пока вы не нажмете на панель поиска и не активирован метод (ionFocus) = "onFocus ()". Потому что тогда кнопки на панели инструментов исчезают, и панель поиска получает полную ширину, , в результате чего значок поиска не перемещается влево, а остается на месте. (рисунок 2)

Как как только вы вводите что-то в строку поиска, значок поиска позиционируется слева в правильном месте, как вы можете видеть на последнем третьем изображении.

Если я не использую метод (ionFocus), значок поиска перемещается правильно. Однако мне нужен метод (ionFocus), и я вынужден найти решение.

Я благодарен за любую помощь! 

<ion-searchbar 
  placeholder="Suche im Wiki" 
  inputmode="text" type="text" 
  [(ngModel)]="searchTerm" mode="ios"
  (ionChange)="onSearchChange($event)" 
  (ionCancel)="cancelSearch()" 
  (ionBlur)="onBlur()" 
  (ionFocus)="onFokus()"
  showCancelButton="focus" 
  [debounce]="250" 
  animated="true">
</ion-searchbar>

Рисунок 1: Внешний вид по умолчанию

Рисунок 2: Это то, как выглядит панель инструментов, когда я нажимал на панели поиска.

Рисунок 3: Это то, что панель инструментов выглядит, когда я что-то печатаю в строке поиска. Вы можете видеть, что как только вы что-то печатаете, значок поиска перемещается влево в правильное положение.

enter image description here

enter image description here

enter image description here

1 Ответ

0 голосов
/ 20 января 2020

Здесь мы go mate: в файле ts ad:

В первом состоянии бара с двумя значками рядом добавить в его контейнер это: 

*ngIf="defaultBar == true"

А внутри него это: 

<ion-searchbar 
  placeholder="Suche im Wiki" 
  mode="ios"
  (click)="hideDefaultBar()">
</ion-searchbar>

И второй контейнер Вы добавите их: 

<ion-searchbar 
  *ngIf="defaultBar == false"
  placeholder="Suche im Wiki" 
  inputmode="text" type="text" 
  [(ngModel)]="searchTerm" mode="ios"
  (ionChange)="onSearchChange($event)" 
  (ionCancel)="showDefaultBar()" 
  (ionBlur)="showDefaultBar()"
  showCancelButton="always" 
  [debounce]="250" 
  animated="true">
</ion-searchbar>

Проверьте это и скажите, существует ли какая-либо проблема.

...