Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html ng-app="urbanet.app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Tabs Example</title>
​
    <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="http://code.ionicframework.com/nightly/js/ionic.min.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/angular/angular.min.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/angular/angular-animate.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/angular/angular-sanitize.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/ionic-angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>
             
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
    <script id="tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-icon-top tabs-positive">
        <ion-tab title="Home" icon="ion-home" href="#/tabs/news">
          <ion-nav-view name="tab-news"></ion-nav-view>
        </ion-tab>
      </ion-tabs>
    </script>
​
    <script id="tab-news.html" type="text/ng-template">
      <ion-view view-title="News" class="tab-news">
      <ion-view view-title="Noticias"
                class="tab-news"
                hide-back-button="true">
        <ion-content has-header="true">
          <ion-refresher
            on-refresh="doRefresh()"
            refreshing-icon="fa fa-cog fa-spin">
          </ion-refresher>
          <div class="item item-image polygon">
            <img src="http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg">
          </div>
          <div class="list no-margin" ng-repeat="post in posts">
            <a class="item item-text-wrap top-border-non"
               ng-href="#/tabs/news/{{post.ID}}">
              <h2><i class="fa fa-paperclip"></i> <span ng-bind-html="post.title"></span></h2>
              <p ng-bind-html="post.excerpt"></p>
              <p><i class="fa fa-calendar-o"></i> {{:: post.date | date}}</p>
            </a>
          </div>
      <!--     <ion-infinite-scroll
                  on-infinite="loadMore()"
                  distance="1%"
                  ng-if="!noMoreItemsAvailable"
                  immediate-check="false">
           </ion-infinite-scroll> -->
        </ion-content>
      </ion-view>
    </script>
​
    <script id="tab-post-detail.html" type="text/ng-template">
      <ion-view view-title="Noticia">
        <ion-content has-header="true">
          <div class="list">
            <div class="item item-divider text-center item-text-wrap">
              <h3>{{:: post.title}}</h3>
              <p>{{:: post.content}}</p>
            </div>
          </div>
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>
 
  .polygon {
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 65%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 80%);
    z-index: 999;
  }
​
  .scroll {
    background: white;
  }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
maketrolipro
0viewers