离子 - 离子视图标题按钮网络显示

时间:2016-09-19 06:48:36

标签: html ionic-framework ionic-view

我需要在标题部分添加按钮,但无法在标题部分ion-view中显示按钮:

这是我的代码:

<ion-view >
    <ion-header-bar class="bar-dark">
        <button class="button button-icon" >
            <i class="icon ion-navicon"></i>
        </button>
        <h1 class="title">ToDo</h1>
        <!-- New Task button-->
        <button class="button button-icon" ng-click="newTask()">
            <i class="icon ion-compose"></i>
        </button>
    </ion-header-bar>

    <ion-content>
        <ion-list>
            <ion-item class="item-remove-animate item-avatar item-icon-right"
                      ng-repeat="chat in chats" type="item-text-wrap"
                      href="#/tab/chats/{{chat.id}}">
                <img ng-src="{{chat.face}}">
                <h2>{{chat.name}}</h2>
                <p>{{chat.lastText}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>

                <ion-option-button class="button-assertive" ng-click="remove(chat)">
                    Delete
                </ion-option-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

here是输出图像。

更新

我想要这张图片header bar enter image description here

3 个答案:

答案 0 :(得分:0)

你可以使用这个css类:

<div class="bar bar-header">
  <button class="button button-icon icon ion-navicon"></button>
  <div class="h1 title">Header Buttons</div>
  <button class="button button-clear button-positive">Edit</button>
</div>

这将在标题中显示角上的两个图标和它们之间的文本。

这是另一个例子:

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content class="has-header">
  Some content!
</ion-content>

希望它可以帮到你

编辑:

我看到你正在使用标签应用,所以我找到了这个解决方案here

<ion-nav-buttons side="primary">
  <button class="button" ng-click="doSomething()">
    I'm a button on the primary of the navbar!
  </button>
</ion-nav-buttons>

答案 1 :(得分:0)

您可以尝试设置&#39; has-subheader&#39;像这样的课程

<ion-content class='has-header has-subheader'>
...
</ion-content>

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-view view-title="BBS">
    <ion-header-bar class="bar bar-subheader">
        <div class="button-bar">
            <a class="button">web game</a>
            <a class="button">mobile game</a>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">

    </ion-content>
</ion-view>
&#13;
&#13;
&#13;

请参阅:http://ionicframework.com/docs/components/#subheader

答案 2 :(得分:-1)

尝试使用ion-nav-buttons

<ion-view title="ToDo">
   <ion-nav-buttons side="right">
  <button class="button" ng-click="newTask()">
    NEW
  </button>
</ion-nav-buttons>

    <ion-content>
        <ion-list>
            <ion-item class="item-remove-animate item-avatar item-icon-right"
                      ng-repeat="chat in chats" type="item-text-wrap"
                      href="#/tab/chats/{{chat.id}}">
                <img ng-src="{{chat.face}}">
                <h2>{{chat.name}}</h2>
                <p>{{chat.lastText}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>

                <ion-option-button class="button-assertive" ng-click="remove(chat)">
                    Delete
                </ion-option-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

标题中的输出 enter image description here