Как использовать изображение как кнопку в ионном

Моя цель - использовать изображение в виде кнопки в ионной форме. Сначала я использовал тег для ссылки между страницами. Но когда я нажал на изображение. Эффект кнопки не активируется. Таким образом, я переключаюсь на кнопку тегКак использовать изображение как кнопку в ионном

Я попытался с помощью

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

Но высота кнопки остается неизменной. Таким образом, изображение не будет отображаться в полном размере. Я попытался

style="font-size:100px;"

style="line-height:100px;"

Но ничто не похоже на работу.

Я также попытался добавить свой собственный CSS

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

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

и добавил ниже код в мой index.html

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

и ниже кода мой контроллер

$scope.class = "Test-up";

как я пытался от http://codepen.io/Leiron/pen/ztawA Но это не работает с ios или android. И что же мне делать?

источник

2016-06-04 Wakeme UpNow

попробуйте это.

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

этот трюк, чтобы вы могли иметь высоту и ширину по вашему желанию.

Убедитесь, что вы указали правильный путь к полю src.

источник

2016-06-04 10:44:53

Я попробовал, но ng-click произошел после того, как я отпустил палец. Я хочу, чтобы фон изображения слегка менял свою непрозрачность, пока я касаюсь кнопки. Так же, как при касании ионного предмета. Когда я сдержу палец, будут изменения. Это отличается. –

, если вы хотите, как ионный элемент, тогда поместите это изображение в ионный предмет так, чтобы он был таким же, как вы думаете. '' пусть у него есть только один элемент в списке –

проверить это

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

Если вы до сих пор никаких проблем в CSS и в anyhting, дайте мне знать.

Благодаря

источник

2016-06-04 14:31:45

-1

Смотрите перо @http://codepen.io/jeggu96/pen/NRaxj Надеюсь, что это помогает :) <button ion-button clear (click)="nextPage()"><img src="image path" alt=" " /></button>

источник

2016-10-01 03:20:30

Ионные 2

Поместите ваши иконки в WWW/активов/нимки

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

источник

2017-02-23 15:51:55

кажется, что это работает в ионной 2 с помощью "(клик) "вместо" ng-click " –

Вы можете попробовать таким образом -

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

источник

2017-04-19 11:33:40

Как использовать изображение как кнопку в ионном

ответ

Смежные вопросы