ionic-framework/demos/component-docs/main.html

<ion-toolbar><ion-title>{{ component.title }}</ion-title></ion-toolbar>

<ion-content class="has-header components-demo">

  <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }">
    <button class="button" (click)="openMenu()">
      Show Actionsheet
    </button>
  </section>


  <section id="animation" [ng-class]="{hidden: component.title !== 'Animations' }">
   <img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">

   <div class="animation-buttons">
     <button icon pause primary (click)="pause($event)">
       Pause
       <icon pause></icon>
     </button>
     <button icon play secondary (click)="play($event)">
       Play
       <icon play></icon>
     </button>
   </div>
  </section>


  <section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }" class="section-padding">

    <p>
      <button block>Default</button>
    </p>

    <p>
      <button secondary block>Secondary</button>
    </p>

    <p>
      <button danger block>Danger</button>
    </p>

    <p>
      <button light block>Light</button>
    </p>

    <p>
      <button dark block>Dark</button>
    </p>

  </section>


  <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">

    <ion-card>

      <ion-card-header primary>
        Menu
      </ion-card-header>

      <ion-card-content>
        <a ion-item href="#">
          <icon home item-left></icon>
          Home
        </a>

        <a ion-item href="#">
          <icon people item-left></icon>
          Friends
        </a>

        <button ion-item>
          <icon musical-notes item-left></icon>
          Music
        </button>

        <button ion-item>
          <icon mail item-left></icon>
          Mail
        </button>
      </ion-card-content>

    </ion-card> 


    <ion-card>

      <ion-item>
        <icon football item-left></icon>
        Schedule
        <button outline item-right>Open</button>
      </ion-item>

    </ion-card>

    <ion-card>

      <ion-item>
        <icon trophy item-left></icon>
        Trophies
        <button outline item-right>View</button>
      </ion-item>

    </ion-card>


  </section>
   
  <section id="icons" [ng-class]="{hidden: component.title !== 'Icons' }" class="components-icons">
    
    <ion-row>
      <ion-col><icon ionic></icon></ion-col>
      <ion-col><icon ion-social-angular></icon></ion-col>
      <ion-col><icon ionitron></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon heart></icon></ion-col>
      <ion-col><icon apps></icon></ion-col>
      <ion-col><icon happy></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon people></icon></ion-col>
      <ion-col><icon person></icon></ion-col>
      <ion-col><icon contact></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon lock></icon></ion-col>
      <ion-col><icon key></icon></ion-col>
      <ion-col><icon unlock></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon map></icon></ion-col>
      <ion-col><icon navigate></icon></ion-col>
      <ion-col><icon pin></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon mic></icon></ion-col>
      <ion-col><icon musical-notes></icon></ion-col>
      <ion-col><icon volume-up></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon cafe></icon></ion-col>
      <ion-col><icon calculator></icon></ion-col>
      <ion-col><icon bus></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon camera></icon></ion-col>
      <ion-col><icon cube></icon></ion-col>
      <ion-col><icon image></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon star></icon></ion-col>
      <ion-col><icon wine></icon></ion-col>
      <ion-col><icon pin></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon arrow-back></icon></ion-col>
      <ion-col><icon arrow-dropdown></icon></ion-col>
      <ion-col><icon arrow-forward></icon></ion-col>
    </ion-row>

    <ion-row>
      <ion-col><icon sunny></icon></ion-col>
      <ion-col><icon umbrella</icon></ion-col>
      <ion-col><icon rainy></icon></ion-col>
    </ion-row>

  </section>

  <section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
    <ion-list>

      <ion-header>
        Classes
      </ion-header>

      <ion-item>
        <icon color-wand item-left></icon>
        Dark Arts
      </ion-item>

      <ion-item>
        <icon planet item-left></icon>
        Astronomy
      </ion-item>

      <ion-item>
        <icon flask item-left></icon>
        Potions
      </ion-item>

      <ion-item>
        <icon star item-left></icon>
        Charms
      </ion-item>

    </ion-list>


    <ion-list>

      <ion-header>
        Menu
      </ion-header>

      <ion-switch checked="true">
        <icon shirt item-left></icon>
        Invisibility Cloak
      </ion-switch>

      <ion-item>
        <icon call item-left></icon>
        Call Ron
        <div class="item-note" item-right>Maybe later</div>
      </ion-item>

    </ion-list>


  </section>
    <section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
   TODO
  </section>
    <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
   TODO
  </section>
    <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
   TODO
  </section>
  
  <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
   
   <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
      <ion-slide>
        <div class="demo-slide demo-slide-1">
          Slide 1
        </div>
      </ion-slide>
      <ion-slide>
        <div class="demo-slide demo-slide-2">
          Slide 2
        </div>
      </ion-slide>
      <ion-slide>
        <div class="demo-slide demo-slide-3">
          Slide 3
        </div>
      </ion-slide>
   </ion-slides>
  </section>

  <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
    <ion-tabs tab-bar-placement="bottom">
      <ion-tab tab-title="Food" tab-icon="pizza"></ion-tab>
      <ion-tab tab-title="Drinks" tab-icon="beer"></ion-tab>
      <ion-tab tab-title="Hours" tab-icon="clock"></ion-tab>
    </ion-tabs>
  </section>

</ion-content>