Question

如何将此图标右对齐？我试过了align-title="right"，但它没有用。

<ion-nav-bar align-title="right" class="bar-subheader bar-stable">">
    <ion-nav-back-button class="button-clear">
        <i class="ion-ios-arrow-left"></i>
    </ion-nav-back-button>
</ion-nav-bar>

Answer 1

实际上，后退按钮是硬编码到标题栏中的一种方式。所以你要问的是右边的定制。所以请找到这个有效的例子。这是一个有效的CodePen

<强> HTML

<title>Side Menus</title>

<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>

<div ng-controller="MainCtrl">       
  <ion-nav-view></ion-nav-view>
</div>

<script id="event-menu.html" type="text/ng-template">
  <ion-side-menus>

    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
        </button>
      </ion-nav-buttons>

      <ion-nav-buttons side="right">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
      </ion-nav-buttons>


      </ion-nav-bar>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content> 

    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content>
        <ul class="list">
          <a href="#/event/check-in" class="item">Check-in</a>
          <a href="#/event/attendees" class="item">Attendees</a>
        </ul>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
</script>

<script id="home.html" type="text/ng-template">
  <ion-view title="Welcome">
    <ion-content padding="true">
      <p>Swipe to the right to reveal the left menu.</p>
      <p>(On desktop click and drag from left to right)</p>
    </ion-content>
  </ion-view>
</script>

<script id="check-in.html" type="text/ng-template">
  <ion-view title="Event Check-in">
    <ion-content>
      <form class="list" ng-show="showForm">
        <div class="item item-divider">
          Attendee Info
        </div>
        <label class="item item-input">
          <input type="text" placeholder="First Name" ng-model="attendee.firstname">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Last Name" ng-model="attendee.lastname">
        </label>
        <div class="item item-divider">
          Shirt Size
        </div>
        <ion-radio ng-repeat="shirtSize in shirtSizes"
                   ng-value="shirtSize.value"
                   ng-model="attendee.shirtSize">
          {{ shirtSize.text }}
        </ion-radio>
        <div class="item item-divider">
          Lunch
        </div>
        <ion-toggle ng-model="attendee.vegetarian">
          Vegetarian
        </ion-toggle>
        <div class="padding">
          <button class="button button-block" ng-click="submit()">Checkin</button>
        </div>
      </form>

      <div ng-hide="showForm">
        <pre ng-bind="attendee | json"></pre> 
        <a href="#/event/attendees">View attendees</a>
      </div>
    </ion-content>
  </ion-view>
</script>

<script id="attendees.html" type="text/ng-template">
  <ion-view title="Event Attendees" left-buttons="leftButtons">
    <ion-content>
      <div class="list">
        <ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
                    ng-model="attendee.arrived"
                    ng-change="arrivedChange(attendee)">
          {{ attendee.firstname }}
          {{ attendee.lastname }}
        </ion-toggle>
        <div class="item item-divider">
          Activity
        </div>
        <div class="item" ng-repeat="msg in activity">
          {{ msg }}
        </div>
      </div>
    </ion-content>
  </ion-view>
</script>

<强> JS

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "event-menu.html"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
    })
    .state('eventmenu.checkin', {
      url: "/check-in",
      views: {
        'menuContent' :{
          templateUrl: "check-in.html",
          controller: "CheckinCtrl"
        }
      }
    })
    .state('eventmenu.attendees', {
      url: "/attendees",
      views: {
        'menuContent' :{
          templateUrl: "attendees.html",
          controller: "AttendeesCtrl"
        }
      }
    })

  $urlRouterProvider.otherwise("/event/home");
})

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.attendees = [
    { firstname: 'Nicolas', lastname: 'Cage' },
    { firstname: 'Jean-Claude', lastname: 'Van Damme' },
    { firstname: 'Keanu', lastname: 'Reeves' },
    { firstname: 'Steven', lastname: 'Seagal' }
  ];

  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

.controller('CheckinCtrl', function($scope) {
  $scope.showForm = true;

  $scope.shirtSizes = [
    { text: 'Large', value: 'L' },
    { text: 'Medium', value: 'M' },
    { text: 'Small', value: 'S' }
  ];

  $scope.attendee = {};
  $scope.submit = function() {
    if(!$scope.attendee.firstname) {
      alert('Info required');
      return;
    }
    $scope.showForm = false;
    $scope.attendees.push($scope.attendee);
  };

})

.controller('AttendeesCtrl', function($scope) {

  $scope.activity = [];
  $scope.arrivedChange = function(attendee) {
    var msg = attendee.firstname + ' ' + attendee.lastname;
    msg += (!attendee.arrived ? ' has arrived, ' : ' just left, '); 
    msg += new Date().getMilliseconds();
    $scope.activity.push(msg);
    if($scope.activity.length > 3) {
      $scope.activity.splice(0, 1);
    }
  };

});

导航栏右侧的离子对齐图标

1 个答案: