JSFiddle - React, Tailwind, and code Playground

by Brayan Castro

HTML

<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css">

<div ng-app="sampleApp">
    <ion-nav-view></ion-nav-view>    
    <script type="text/ng-template" id="templates/menu.html">
        <ion-side-menus enable-menu-with-back-views="true">
            <ion-side-menu-content>
                <ion-nav-bar class="bar-stable">
                    <ion-nav-back-button>
                    </ion-nav-back-button>
                    
                    <ion-nav-buttons side="left">
                        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                        </button>
                    </ion-nav-buttons>
                </ion-nav-bar>
                <ion-nav-view name="menuContent"></ion-nav-view>
            </ion-side-menu-content>
            
            <ion-side-menu side="left">
                <ion-header-bar class="bar-stable">
                    <h1 class="title">My app</h1>
                </ion-header-bar>
                <ion-content scroll="false">
                    <ion-list>
                        <ion-item nav-clear menu-close href="#/events">
                            Events
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-side-menu>
        </ion-side-menus>
    </script>
    
    <script type="text/ng-template" id="templates/events.html">
        <ion-view view-title="Events">
            <ion-content padding=true class="has-header">
                <ion-list>
                    <ion-item href="#/events/1">
                        My event
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-view>
    </script>
    
    <script type="text/ng-template" id="templates/event.html">
        <ion-view view-title="My Event">
            <ion-content...

JavaScript

(function () {
    angular.module('sampleApp', ['ionic'])
    
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      })
    })
    
    .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
      $ionicConfigProvider.views.maxCache(0);
      $stateProvider
    
      .state('app', {
        abstract: true,
        templateUrl: "templates/menu.html"
      })
    
      .state('app.events', {
        url: "/events",
        views: {
          'menuContent': {
            templateUrl: "templates/events.html"
          }
        }
      })
    
      .state('app.event', {
        url: "/events/:id",
        views: {
          'menuContent': {
            templateUrl: "templates/event.html"
          }
        }
      })
    
      .state('app.conference', {
        abstract: true,
        views: {
          'menuContent': {
            templateUrl: "templates/conference.html"
          }
        }
      })
    
      .state('app.conference.information', {
        url: "/events/:id/conferences/:conferenceId/information",
        views: {
          'conferenceInformation': {
            templateUrl: "templates/conference/information.html"
          }
        }
      })
    
      .state('app.conference.presentation', {
        url: "/events/:id/conferences/:conferenceId/presentation",
        views: {
          'conferencePresentation': {
            templateUrl: "templates/conference/presentation.html"
          }
        }
      })
    
      .state('app.conference.questions', {
        url:...