web-dev-qa-db-fra.com

Comment utiliser l'image comme bouton dans ionique

Mon objectif est d'utiliser l'image comme un bouton dans ionique. J'ai d'abord utilisé un tag pour faire le lien entre les pages. Mais quand j'ai cliqué sur l'image. Il n'y a pas d'effet activé par bouton. Je passe donc à button-tag

J'ai essayé d'utiliser

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

Mais la hauteur du bouton reste la même. Donc, il ne montrera pas l'image en taille réelle ... J'ai essayé

style="font-size:100px;"

et

style="line-height:100px;"

Mais rien ne semble fonctionner.

J'ai aussi essayé d'ajouter mon propre css

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

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

et ajouté ci-dessous le code dans mon index.html

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

et ci-dessous le code à mon contrôleur

$scope.class = "Test-up";

comme je l'ai essayé de http://codepen.io/Leiron/pen/ztawA Mais cela ne fonctionne pas avec iOS ou Android. Donc qu'est ce que je devrais faire?

androidioscssangularjsionic-framework
10
Wakeme UpNow

essaye ça.

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

pour ce faire, vous pouvez choisir la hauteur et la largeur souhaitées.

Assurez-vous de donner le bon chemin au champ src.

9
Mohan Gopi

Vous pouvez essayer de cette façon -

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

Ionic 2

Placez vos icônes dans www/assets/images puis

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

vérifie ça

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

Si vous rencontrez toujours des problèmes en CSS et en quoi que ce soit, faites le moi savoir.

Merci

0
piyush jain