PhoneGap中文网

标题: ionic框架中,想在顶部标题栏右侧增加图标按钮,怎么写 [打印本页]

作者: unclejoker    时间: 2016-4-23 18:02
标题: ionic框架中,想在顶部标题栏右侧增加图标按钮,怎么写
index.html
  1. <ion-nav-bar class="bar-stable" animation="slide-left-right">
  2.           <ion-nav-back-button class="button-clear">
  3.                <i class="ion-ios-arrow-left"></i>
  4.                <!--标题-->
  5.          </ion-nav-back-button>

  6. </ion-nav-bar>


  7. <ion-nav-view>
  8.           <!--内容-->
  9. </ion-nav-view>
复制代码
tabs.html
  1. <ion-tabs class="tabs-icon-top tabs-stable tabs-color-active-balanced {{hideTabs}}">
  2.       <ion-tab title="首页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="tab.home">
  3.                  <ion-nav-view animation="slide-left-right" name="tab-home"></ion-nav-view>
  4.      </ion-tab>
  5.      <ion-tab title="订单" icon-on="ion-ios-list" icon-off="ion-ios-list-outline" ui-sref="tab.order">
  6.             <ion-nav-view animation="slide-left-right" name="tab-order"></ion-nav-view>
  7.      </ion-tab>
  8. </ion-tabs>
复制代码
order.html
  1. <ion-view view-title="全部订单">
  2.      <ion-content class="padding">
  3.       
  4.      </ion-content>
  5. </ion-view>
复制代码


3835612552-57145290b1d49.jpg (6.25 KB, 下载次数: 415)

3835612552-57145290b1d49.jpg

作者: ionicwang    时间: 2016-4-23 19:33
http://www.ionic.wang/course-index.html  

第26 27节看看


基础教程没有看的话建议挨着看看
作者: unclejoker    时间: 2016-4-25 11:14
ionicwang 发表于 2016-4-23 19:33
http://www.ionic.wang/course-index.html  

第26 27节看看

index.html
  1. <body ng-app="app">
  2.     <ion-nav-view animation="slide-left-right">
  3.     </ion-nav-view>
  4. </body>
复制代码

  1. <ion-header-bar align-title="left" class="bar-dark">
  2.             <div class="h1 title">title</div>
  3.             <div class="buttons">
  4.                 <button class="button no-animation button-icon icon ion-android-search">
  5.                 </button>
  6.                 <button class="button no-animation button-icon icon ion-android-add">
  7.                 </button>
  8.             </div>
  9.         </ion-header-bar>
  10. <ion-view on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()">
  11.     <ion-content>
  12.         <h1 >发现</h1>
  13.     </ion-content>
  14. </ion-view>
复制代码


我是不是要这样写,才能单独给每个页面可以添加,按照我原先的写法,是写不了的?

作者: cswisodmliu    时间: 2016-4-26 14:37
可以的,看http://www.ionic.ren/category/angularjsionic/ionicjs/




欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2