Come usare l'immagine come pulsante in ionico

Il mio obiettivo è usare l'immagine come pulsante in ionico. Ho usato per la prima volta un tag a link tra le pagine. Ma quando ho cliccato sull'immagine. Non vi è alcun effetto attivato da pulsante. Così posso passare al pulsante-tagCome usare l'immagine come pulsante in ionico

Ho provato con

<button class="button button-clear" style="background-image:url('img/myImage.jpg'); background-size:cover"></button>

ma l'altezza pulsante di rimanere lo stesso. Quindi non mostrerà l'immagine a dimensione intera. Ho provato

style="font-size:100px;"

style="line-height:100px;"

Ma nulla sembra funzionare.

Ho anche provato ad aggiungere il mio css

.Test-up { 
    border :none; 
    padding : 0px; 
} 

.Test-down { 
    opacity: 0.5; 
    border:0px; 
    padding: 0px; 
}

e ha aggiunto sotto il codice nel mio index.html

<button ng-mousedown="class='Test-down'" ng-mouseup="class='Test-up'" class="{{class}}" href="#">

e sotto il codice per il mio controller

$scope.class = "Test-up";

come ho cercato da http://codepen.io/Leiron/pen/ztawA Ma non funziona con iOS o Android. Quindi cosa dovrei fare?

fonte

2016-06-04 Wakeme UpNow

provare questo.

<img src="img/myImage.jpg" style="width : 100% ; height : 100%" ng-click="nextpage()" >

questo shoud al trucco si può avere l'altezza e la larghezza come il vostro desiderio.

Assicurarsi di fornire il percorso corretto per il campo src.

fonte

2016-06-04 10:44:53

Ho provato, ma il ng-clic si verifica dopo che ho rilasciato il mio dito. Voglio che lo sfondo dell'immagine cambi leggermente la sua opacità mentre tocco il pulsante. Proprio come quando si tocca un oggetto di ioni. Ci sarà un cambiamento mentre sto tenendo premuto il dito. È diverso. –

se vuoi un oggetto di ioni quindi metti questa immagine in ione-articolo così sarà uguale a quella che pensi come '' lascia che abbia un solo elemento nell'elenco –

controllo questo

<button ng-mousedown="class='fb-down'" ng-mouseup="class='fb-up'" class="{{class}}"> <img src="your_image_path" alt="" title="" /> </button>

Se ancora dovete affrontare qualsiasi problema in CSS e in anyhting fammi sapere.

Grazie

fonte

2016-06-04 14:31:45

-1

Vedere la penna @http://codepen.io/jeggu96/pen/NRaxj Speranza che aiuta :) <button ion-button clear (click)="nextPage()"><img src="image path" alt=" " /></button>

fonte

2016-10-01 03:20:30

ionico 2

Posizionare le icone in www/assets/images poi

<img src="assets/images/icon.png" style="width : 100% ; height : 100%" ng-click="nextpage()" >

fonte

2017-02-23 15:51:55

sembra che funzioni in ionico 2 con "(fai clic su "invece di" ng-clic " –

Puoi provare in questo modo:

<button (click)="click()" block> 
    <img src="assets/img/scan_btn.png"> 
</button>

fonte

2017-04-19 11:33:40

Come usare l'immagine come pulsante in ionico

risposta

Problemi correlati