Ionic 2 / 3 / 4：如何将标题中的按钮与标题右侧对齐答案

【问题标题】：Ionic 2 / 3 / 4 : How to align button in the header to the right side of headerIonic 2 / 3 / 4：如何将标题中的按钮与标题右侧对齐
【发布时间】：2016-06-30 13:25:21
【问题描述】：

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

这是我正在做的事情：

<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

【解决方案1】：

您可以在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");        
 }

或

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

或

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

html

<ion-icon name="custom"></ion-icon>

【讨论】：

如果应该有compose的图标，那么呢？
如果那里有撰写图标，您可以添加您的班级名称。
我刚刚从文档中读到：要使用图标，只需将图标的 CSS 类添加到您的元素中，如何做到这一点，图标的 css 类在哪里

【解决方案2】：

<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>

这应该适合你......

【讨论】：

【解决方案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 准则。因此，您可以通过这种方式提高应用的质量。

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

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

【讨论】：

带有 end 属性的 ion-buttons 标签正是我所需要的，谢谢！
不客气，伙计！希望有一天我能帮助你更多哈哈 ;-)
如果我在左边只有一个按钮，我需要标题位于 ion-header 的中心，而不是 ion-title 的中心（准确地位于中心）跨度>

【解决方案4】：

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

ion-buttons {
    order: 10
}

尝试将其添加到您的样式表中

注意：我在ionic2中使用过这个。

【讨论】：

【解决方案5】：

<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/

【讨论】：

【解决方案6】：

ionic 4 ion-navbar 被 ion-back-button 替换，在 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="secondary">
        <ion-icon name="search"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

【讨论】：

最好将该信息编辑到您的答案而不是评论中，这样它就变得完整了。
您的语法错误。 <ion-button slot="end"> <ion-icon name="search"></ion-icon> </ion-buttons>

【解决方案7】：

这对我有用。

Ionic 4 - 标题

<ion-header>
   <ion-toolbar color="primary">
      <ion-title class="titleHeader">User Detail</ion-title>
      <ion-buttons slot="end">
            <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
   </ion-toolbar>
</ion-header>

【讨论】：

【解决方案8】：

可以按如下方式进行：

 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-button slot="start">
        <ion-icon name="search"></ion-icon>
     </ion-button>
     <ion-title>
       utenze
     </ion-title>
     <ion-button slot="end">
        <ion-icon name="menu"></ion-icon>
     </ion-button>
   </ion-toolbar>
 </ion-header>

【讨论】：