A page with ion-slidebox and ion-headerbar

ionic-v1
1

I am new to ionic, i am trying to get working this view but to no avail, if i delete ion-side-menus it works fine but i need this navbar up.

<ion-view title="Producto">

<ion-side-menus>
    <ion-side-menu-content> 
       <ion-header-bar class="bar-positive">
               <div class="buttons">
                       <button class="button icon ion-navicon" ng-click="toggleLeft()">Add</button>
                       <i class = "icon ion-navicon"> 
                       </i>
               </div>
       </ion-header-bar>
    </ion-side-menu-content> 

   <ion-side-menu>
      <ion-list>
          <ion-item>Oe</ion-item>
          </ion-list>
          <ion-list>
             <ion-item>Oe</ion-item>
          </ion-list>
          <ion-list>
             <ion-item>Oe</ion-item>
          </ion-list>
    </ion-side-menu>
</ion-side-menus>

  <ion-content class="has-header padding">
       
<ion-slide-box active-slide="1" show-pager="false" disable-scroll="false" on-slide-changed="slideHasChanged($index)">
 <ion-slide class="items" ng-repeat="producto in productos">      
   <div class="oe">
  <img src="{{producto['image_url']}}"/>
  </div>
  </ion-slide>
</ion-slide-box>

  </ion-content>
</ion-view>
2

Your syntax is a bit off. Try this

<ion-side-menus>
    <ion-side-menu-content> 
       <ion-header-bar class="bar-positive">
               <div class="buttons">
                       <button class="button icon ion-navicon" ng-click="toggleLeft()">Add</button>
                       <i class = "icon ion-navicon"> 
                       </i>
               </div>
       </ion-header-bar>

 <ion-content class="has-header padding">

<ion-slide-box active-slide="1" show-pager="false" disable-scroll="false" on-slide-changed="slideHasChanged($index)">
 <ion-slide class="items" ng-repeat="producto in productos">      
   <div class="oe">
  <img src="{{producto['image_url']}}"/>
  </div>
  </ion-slide>
</ion-slide-box>

  </ion-content>
    </ion-side-menu-content> 

   <ion-side-menu side="left">
      <ion-list>
          <ion-item>Oe</ion-item>
          </ion-list>
          <ion-list>
             <ion-item>Oe</ion-item>
          </ion-list>
          <ion-list>
             <ion-item>Oe</ion-item>
          </ion-list>
    </ion-side-menu>
</ion-side-menus>
1 Like