Question

android/Browser上的示例

示例Ios

page.html

<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
    <ion-navbar color="ticket-blue-rainbow" >
        <ion-row>
            <ion-title> {{ evento.descricao }}</ion-title>
            <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
            <ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
            <ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
        </ion-row>
    </ion-navbar>
</ion-header>

page.scss

 .padding-icon {
    padding-right: 15px;
    font-size: 20px;
  }

Answer 1

要解决上述问题，您需要使用带有<ion-buttons>标签的以下选项

<ion-buttons right>
   <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right 
   (click)="likeEvento()"></ion-icon>
</ion-buttons>

它将起作用，并在右侧显示您的按钮。

Answer 2

<ion-header>
  <ion-navbar>

    <ion-title> {{ evento.descricao }}</ion-title>

    <ion-buttons right>
        <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
        <ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
        <ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
    </ion-buttons>
  </ion-navbar>

</ion-header>

Answer 3

我不是不是最正确的方法，但是在这种情况下，我在<div class="row"> <div class="col-md-12"> <div class="form-group"> <label>Score Content:</label>    <label id="lbl_lblcontent"></label> </div> </div> </div>上使用了该类

ios

在我使用过的.ios { page-event { .padding-ios{ padding-left:70%!important; } } }上

html

导航栏上的右侧图标无法在ios上正常工作

3 个答案: