Ionic 2離子搜索欄showCancelButton不能在Android上工作

我正在使用Ionic2。Ionic 2離子搜索欄showCancelButton不能在Android上工作

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.3.0 
Ionic CLI Version: 2.1.18 
Ionic App Lib Version: 2.1.9 
Ionic App Scripts Version: 1.1.4 
ios-deploy version: Not installed 
ios-sim version: Not installed 
OS: macOS Sierra 
Node Version: v6.9.4 
Xcode version: Xcode 8.3 Build version 8E162

我不能讓ion-searchbar顯示Android平臺上使用取消按鈕showCancelButton。

<ion-searchbar [showCancelButton]="true" class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (change)="onChangeText($event)" (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="Keyword Search" debounce="1"></ion-searchbar>

的iOS

的Android

同樣的問題。據悉here，但它不會似乎尚未解決，並想知道是否有人有工作？

謝謝

來源

2017-04-05 Richard

你就可以開始在Android版本打字。它應該顯示然後..檢查文檔中的演示..http：//ionicframework.com/docs/api/components/searchbar/Searchbar/ –

這是你的意思：$ android版本 android命令不再可用。 – Richard

no ..在android搜索欄中開始輸入......它顯示'X'圖標 –

取消按鈕是在輸入域左側的後退箭頭圖標，這是相當混亂，讓我開始爲好，這裏是演示中，我已經建立在這裏你可以看到它的工作：

<ion-toolbar> 
    <ion-searchbar 
     [(ngModel)]="searchString" 
     [showCancelButton]="showSearchCancelButton" 
     (ionInput)="searchStuff(searchString)" 
     (ionCancel)="onCancelSearch()"> 
    </ion-searchbar> 
    </ion-toolbar>

組件：

... 
    onCancelSearch(): void { 
    alert('cancel clicked'); 
    } 
    ...

DEMO

來源

2017-04-05 14:03:32 Und3rTow

Android上沒有「CancelButton」。

您可以在官方庫上自行查閱：searchbar.ts。

/** 
    * @hidden 
    * Show the iOS Cancel button on focus, hide it offscreen otherwise 
    */ 
    positionCancelButton() { 
    if (!this._cancelButton || !this._cancelButton.nativeElement) { 
     return; 
    } 
    let showShowCancel = this._sbHasFocus; 
    if (showShowCancel !== this._isCancelVisible) { 
     let cancelStyleEle = this._cancelButton.nativeElement; 
     let cancelStyle = cancelStyleEle.style; 
     this._isCancelVisible = showShowCancel; 
     if (showShowCancel) { 
     cancelStyle.marginRight = '0'; 
     } else { 
     let offset = cancelStyleEle.offsetWidth; 
     if (offset > 0) { 
      cancelStyle.marginRight = -offset + 'px'; 
     } 
     } 
    } 
    }

Android和IOS不相似。

來源

2017-04-05 13:45:23

As @ Und3rTow表示，取消按鈕是android上左側的後退箭頭。 –

Ionic 2離子搜索欄showCancelButton不能在Android上工作

回答

相關問題