【问题标题】: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 准则。因此,您可以通过这种方式提高应用的质量。

    有关指南的更多信息:

    安卓https://developer.android.com/guide/practices/ui_guidelines/index.html

    iOShttps://developer.apple.com/ios/human-interface-guidelines/

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

      替换:

      1. YOUR_FUNCTION_CALL 与单击时需要调用的函数调用
      2. 带有图标名称的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>
        

        【讨论】:

        • 最好将该信息编辑到您的答案而不是评论中,这样它就变得完整了。
        • 您的语法错误。 &lt;ion-button slot="end"&gt; &lt;ion-icon name="search"&gt;&lt;/ion-icon&gt; &lt;/ion-buttons&gt;
        【解决方案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>
          

          【讨论】:

            猜你喜欢
            • 2020-09-06
            • 2019-12-23
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2015-03-03
            • 2022-11-04
            • 2017-05-26
            • 2017-04-30
            相关资源
            最近更新 更多