Skip to content

Instantly share code, notes, and snippets.

@kazekagegaara

kazekagegaara/Scrollable-list-in-Ionic.markdown

Created January 14, 2015 21:51
Show Gist options
  • Save kazekagegaara/a2e553082a5694a8c21e to your computer and use it in GitHub Desktop.
Save kazekagegaara/a2e553082a5694a8c21e to your computer and use it in GitHub Desktop.
Download ZIP
Scrollable list in Ionic
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Sample UL</title>
<link href="http://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.22/js/ionic.js"></script>
<script src="http://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
<script src="http://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
<script src="http://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
<script src="http://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
<script src="http://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
</head>
<body>
<header-bar title="'Sample UL'" type="bar-positive"></header-bar>
<content has-header="true" padding="true" scroll="false">
<button class="button button-block button-positive">
Sample Button
</button>
<div style="height:250px">
<scroll direction="y">
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
<li class="item">11</li>
<li class="item">12</li>
<li class="item">13</li>
<li class="item">14</li>
<li class="item">15</li>
<li class="item">16</li>
<li class="item">17</li>
<li class="item">18</li>
<li class="item">19</li>
<li class="item">20</li>
</ul>
</scroll>
</content>
</body>
</html>
Raw
script.js
angular.module('ionicApp', ['ionic'])
Raw
Scrollable-list-in-Ionic.markdown
Raw
style.css
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.scroll-view
{
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment