Curso de Ionic - Aula 08 - Elementos

header-1.html

<ion-header-bar>
  <h1 class="title">Header</h1>
</ion-header-bar>

header-2.html

<ion-header-bar class="bar-positive">

  <div class="buttons">
    <button class="button">Left Button</button>
  </div>
  
  <h1 class="title">Header</h1>
  
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
  
</ion-header-bar>

icons.html

<i class="icon ion-star"></i>

-- Lista de ícones: http://ionicons.com/

lists-1.html

<ion-list>
  <ion-item>Item 01</ion-item>
  <ion-item>Item 02</ion-item>
  <ion-item>Item 03</ion-item>
</ion-list>

lists-2.html

<ion-list>
  <ion-item class="item-remove-animate item-avatar item-icon-right" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
    <img ng-src="http://ionicframework.com/img/ionic-logo-blog.png">
    <h2>Item 1</h2>
    <p>Lorem Ipsum</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
  </ion-item>
  <ion-item class="item-remove-animate item-avatar item-icon-right" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
    <img ng-src="http://ionicframework.com/img/ionic-logo-blog.png">
    <h2>Item 2</h2>
    <p>Lorem Ipsum</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
  </ion-item>
</ion-list>

menu.html

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>
</ion-side-menus>

tabs.html

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>