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

<ion-navbar *navbar class="show-navbar">
  <ion-title>{{ component.title }}</ion-title>
</ion-navbar>


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

  <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }" class="section-padding">
    <button block (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>Default</button>
    </p>

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

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

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

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

  </section>

  <section id="block-buttons" [ng-class]="{hidden: component.title !== 'Block 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="full-buttons" [ng-class]="{hidden: component.title !== 'Full Buttons' }">

    <p>
      <button full>Default</button>
    </p>

    <p>
      <button secondary full>Secondary</button>
    </p>

    <p>
      <button danger full>Danger</button>
    </p>

    <p>
      <button light full>Light</button>
    </p>

    <p>
      <button dark full>Dark</button>
    </p>

  </section>

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

    <p>
      <button outline>Default</button>
    </p>

    <p>
      <button secondary outline>Secondary</button>
    </p>

    <p>
      <button danger outline>Danger</button>
    </p>

    <p>
      <button light outline>Light</button>
    </p>

    <p>
      <button dark outline>Dark</button>
    </p>

  </section>  

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

    <p>
      <button round>Default</button>
    </p>

    <p>
      <button secondary round>Secondary</button>
    </p>

    <p>
      <button danger round>Danger</button>
    </p>

    <p>
      <button light round>Light</button>
    </p>

    <p>
      <button dark round>Dark</button>
    </p>

  </section>

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

    <p>
      <button fab fab-top fab-right>
        <icon add></icon>
      </button>
    </p>

  </section>
  

  <section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding">

    <p>
      <button small>Default</button>
    </p>

    <p>
      <button secondary small>Secondary</button>
    </p>

    <p>
      <button danger small>Danger</button>
    </p>

    <p>
      <button light large>Light</button>
    </p>

    <p>
      <button dark large>Dark</button>
    </p>

  </section>

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

    <p>
      <button>
        <icon home></icon>
        Home
      </button>
    </p>

    <p>
      <button secondary>
        <icon people></icon>
        Friends
      </button>
    </p>

    <p>
      <button danger>
        <icon close></icon>
      </button>
    </p>

    <p>
      <button light>
        <icon arrow-back></icon>
        Back
      </button>
    </p>

    <p>
      <button dark>
        <icon hammer></icon>
      </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
        <ion-note item-right>Maybe later</ion-note>
      </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' }" class="section-padding">
   <button block (click)="openModal()">
    Show Modal
  </button>

  </section>

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

      <a ion-item (click)="openNavDetailsPage('Angular')">
        <icon ion-social-angular item-left></icon>
        Angular
      </a>

      <a ion-item href="#" (click)="openNavDetailsPage('CSS3')">
        <icon ion-social-css3 item-left></icon>
        CSS3
      </a>

      <button ion-item (click)="openNavDetailsPage('HTML5')">
        <icon ion-social-html5 item-left></icon>
        HTML5
      </button>

      <button ion-item (click)="openNavDetailsPage('Sass')">
        <icon ion-social-sass item-left></icon>
        Sass
      </button>

    </ion-list>


  </section>

  <section id="popup" [ng-class]="{hidden: component.title !== 'Popups' }" class="section-padding">
    <button block (click)="showPopup()">
      Show Popup
    </button>
  </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="forms" [ng-class]="{hidden: component.title !== 'Forms' }">
    <form (submit)="processForm($event)" [ng-form-model]="form">
        <ion-list>
        <ion-input>
          <input ng-control="firstName" type="text" placeholder="First Name">
        </ion-input>
        <ion-input>
          <input ng-control="lastName" type="text" placeholder="Last Name">
        </ion-input>
      </ion-list>
      <div class="padding">
        <button block type="submit">Create Account</button>
      </div>
    </form>
  </section>

</ion-content>