it-swarm.com.de

So verwenden Sie ein Bild als Schaltfläche in Ion

Mein Ziel ist es, das Bild als Schaltfläche in ionisch zu verwenden. Ich habe zuerst ein A-Tag verwendet, um zwischen den Seiten zu verknüpfen. Aber als ich auf das Bild geklickt habe. Es ist keine Schaltfläche aktiviert. Also wechsle ich zu Button-Tag

Ich habe es mit versucht

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

Die Knopfhöhe bleibt jedoch gleich. Es wird also kein Bild in voller Größe angezeigt ... Ich habe es versucht

style="font-size:100px;"

und

style="line-height:100px;"

Aber nichts scheint zu funktionieren.

Ich habe auch versucht, meine eigene CSS hinzuzufügen

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

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

und fügte unten Code in meine index.html hinzu

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

und unter dem Code an meinen Controller

$scope.class = "Test-up";

wie ich es aus http://codepen.io/Leiron/pen/ztawA .__ ausprobiert habe, aber es funktioniert nicht mit ios oder Android. Also was soll ich tun?

10
Wakeme UpNow

versuche dies.

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

zu diesem Trick können Sie die Höhe und Breite nach Ihren Wünschen festlegen.

Vergewissern Sie sich, dass Sie den richtigen Pfad zum SRC-Feld angeben.

9
Mohan Gopi

Sie können diesen Weg versuchen -

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

Ionic 2

Platzieren Sie Ihre Icons dann in www/assets/images

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

Ionen 4

<a routerLink="/user/details" routerDirection="forward">
   <img src='assets/images/icon.png'  />
</a>
0
Ricky Levi

Überprüfen Sie dies

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

Wenn Sie immer noch ein Problem in css und in anyhting haben, lassen Sie es mich wissen.

Vielen Dank

0
piyush jain

Hiermit können Sie die Bildschaltfläche für das Routing verwenden.

<button onclick="location.href='/pageToRoute/param'" block>
   <img  src="imagePath/imageName.jpg">
</button>
0

Ion 5

Sie können auch Ionenkarte Element verwenden:

<ion-card class="welcome-card" [routerLink]="['/tabs/tab3']">
    <ion-img src='/assets/VC-Button-calendario-01.svg'></ion-img>
</ion-card>
0