首页 文章

Ionic 2/3/4：如何将 Headers 中的按钮对齐 Headers 的右侧

提问于
浏览 次
9

如何与右侧对齐，按钮显示在 Headers 的左侧，没有撰写图标 .

这是我正在做的事情：

<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
    <i class="icon ion-compose"></i>
</button>
</ion-toolbar>
html ionic-framework angular ionic2

6 回答

  • 3

    Ionic 2 / Ionic 3有一些东西，只需看看下面的代码：

    <ion-header>
  <ion-navbar primary>
    <ion-buttons start>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>
      My Page
    </ion-title>

    <ion-buttons end>
      <button (click)="myFunction()" ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

    以这种方式解决问题的好处是你的导航栏会自动遵守android / ios / windows指南 . 因此，这样可以提高应用的质量 .

    有关指南的更多信息：

    Android ：https://developer.android.com/guide/practices/ui_guidelines/index.html

    iOS ：https://developer.apple.com/ios/human-interface-guidelines/

    Windows ：https://developer.microsoft.com/en-us/windows/design

    回复于
  • 0

    你可以在 Headers 的右侧添加按钮ionic 2.0

    <ion-navbar *navbar>
    <ion-title>
        TODO APP
    </ion-title>
    <ion-buttons end>
        <button ><ion-icon name="home"></ion-icon></button>
    </ion-buttons>
</ion-navbar>

    您可以像这样添加自定义图标的css类

    css

    .ion-ios-custom:before {
    background-image: url("image-icon.png");        
 }

    OR

    .ion-ios-custom:before {       
   content: "\f439"; /* your font code */
 }

    OR

    .ion-ios-custom:before {
   content: url("image-icon.png") !important;
}

    html

    <ion-icon name="custom"></ion-icon>
    回复于
  • 26

    离子4离子导航条被离子后退按钮取代，并且在 Ionic 4 后退按钮就像

    <ion-header>
  <ion-toolbar>
       <ion-buttons slot="start">
  <ion-back-button></ion-back-button>
       </ion-buttons>
    <ion-title>
     Home
    </ion-title>
      <ion-button slot="end">
        <ion-icon name="search"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
    回复于
  • -3

    我用这个解决了我的问题：

    ion-buttons {
    order: 10
}

    尝试将其添加到样式表中

    Note: 我在ionic2中使用过它 .

    回复于
  • 0
    <ion-toolbar color='primary'>
    <button ion-button menuToggle>
        <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>TODO APP</ion-title>
    <ion-buttons start>
        <button (click)='YOUR_FUNCTION_CALL' ion-button icon-only>
            <ion-icon name='YOUR_ICON_NAME'></ion-icon>
        </button>
    </ion-buttons>
</ion-toolbar>

    更换：

    • YOUR_FUNCTION_CALL，单击时需要调用函数调用
      带有图标名称的
    • YOUR_ICON_NAME

    图标请访问此网站http://ionicframework.com/docs/v2/ionicons/

    回复于
  • 3
    <ion-view title="home" align-title="center">    
    <ion-nav-buttons side="right">        
        <button ng-click="search()" class="button button-icon icon ion-android-search"></button>
    </ion-nav-buttons>    
    <ion-content has-bouncing="0px">
    </ion-content>
</ion-view>

    这对你有用......

    回复于

相关问题