A Pen by Bogdan Raduta on CodePen.
Created
April 4, 2015 21:05
-
-
Save ramanan12345/ad77fc9cb621652f78bf to your computer and use it in GitHub Desktop.
Ionic Sample List
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <title>Ionic List Directive</title> | |
| <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> | |
| <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> | |
| </head> | |
| <body ng-controller="MyCtrl"> | |
| <ion-header-bar class="bar" style="background-color:#ff4c00; "> | |
| <div class="buttons"> | |
| <button class="button button-icon icon ion-ios7-minus-outline" | |
| ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button> | |
| <h1 class="title" style="color:#ffffff">Simple List</h1> | |
| </button> | |
| </div> | |
| </ion-header-bar> | |
| <ion-content> | |
| <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists --> | |
| <ion-list> | |
| <div class="list"> | |
| <div class="item item-divider"> | |
| Facultati | |
| </div> | |
| <a class="item "> | |
| Administrarea Afacerilor, cu predare in limbi straine | |
| </a> | |
| <a class="item" href="#"> | |
| Administratie si Management Public | |
| </a> | |
| <a class="item" href="#"> | |
| Bucharest Business School | |
| </a> | |
| <div class="item "> | |
| Business si Turism | |
| </div> | |
| <a class="item" href="#"> | |
| Cibernetica, Statistica si Informatica Economica | |
| </a> | |
| <a class="item" href="#"> | |
| Contabilitate si Informatica de Gestiune | |
| </a> | |
| <div class="item "> | |
| Economie Teoretica si Aplicata | |
| </div> | |
| <a class="item" href="#"> | |
| Economie Agroalimentara si a Mediului | |
| </a> | |
| <a class="item" href="#"> | |
| Finante, Asigurari, Banci si Burse de Valori | |
| </a> | |
| <a class="item" href="#"> | |
| Management | |
| </a> | |
| <a class="item" href="#"> | |
| Marketing | |
| </a> | |
| <a class="item" href="#"> | |
| Relatii Economice Internationale | |
| </a> | |
| <div class="item item-divider"> | |
| Resurse | |
| </div> | |
| <a class="item" href="#"> | |
| Biblioteca Centrala | |
| </a> | |
| <a class="item" href="#"> | |
| Editura ASE | |
| </a> | |
| <a class="item" href="#"> | |
| Biroul acte de studii | |
| </a> | |
| </div> | |
| </ion-list> | |
| </ion-content> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('ionicApp', ['ionic']) | |
| .controller('MyCtrl', function($scope) { | |
| $scope.data = { | |
| showDelete: false | |
| }; | |
| $scope.edit = function(item) { | |
| alert('Edit Item: ' + item.id); | |
| }; | |
| $scope.share = function(item) { | |
| alert('Share Item: ' + item.id); | |
| }; | |
| $scope.moveItem = function(item, fromIndex, toIndex) { | |
| $scope.items.splice(fromIndex, 1); | |
| $scope.items.splice(toIndex, 0, item); | |
| }; | |
| $scope.onItemDelete = function(item) { | |
| $scope.items.splice($scope.items.indexOf(item), 1); | |
| }; | |
| $scope.items = [ | |
| { id: 0 }, | |
| { id: 1 }, | |
| { id: 2 }, | |
| { id: 3 }, | |
| { id: 4 }, | |
| { id: 5 }, | |
| { id: 6 }, | |
| { id: 7 }, | |
| { id: 8 }, | |
| { id: 9 }, | |
| { id: 10 }, | |
| { id: 11 }, | |
| { id: 12 }, | |
| { id: 13 }, | |
| { id: 14 }, | |
| { id: 15 }, | |
| { id: 16 }, | |
| { id: 17 }, | |
| { id: 18 }, | |
| { id: 19 }, | |
| { id: 20 }, | |
| { id: 21 }, | |
| { id: 22 }, | |
| { id: 23 }, | |
| { id: 24 }, | |
| { id: 25 }, | |
| { id: 26 }, | |
| { id: 27 }, | |
| { id: 28 }, | |
| { id: 29 }, | |
| { id: 30 }, | |
| { id: 31 }, | |
| { id: 32 }, | |
| { id: 33 }, | |
| { id: 34 }, | |
| { id: 35 }, | |
| { id: 36 }, | |
| { id: 37 }, | |
| { id: 38 }, | |
| { id: 39 }, | |
| { id: 40 }, | |
| { id: 41 }, | |
| { id: 42 }, | |
| { id: 43 }, | |
| { id: 44 }, | |
| { id: 45 }, | |
| { id: 46 }, | |
| { id: 47 }, | |
| { id: 48 }, | |
| { id: 49 }, | |
| { id: 50 } | |
| ]; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } | |
| ion-item.ng-leave { | |
| opacity: 1; | |
| transition: .1s all ease-in; | |
| } | |
| ion-item.ng-leave.ng-leave-active { | |
| opacity: 0; | |
| } | |
| ion-item.ng-leave-active ~ ion-item:not(.ng-leave), | |
| ion-item.ng-leave-active:last-of-type { | |
| /* get rid of tiny jump due to borders with the 1px calc */ | |
| transform: translate3d(0, calc(-100% + 1px), 0); | |
| transition: .1s all ease-in; | |
| } | |
| ion-item.ng-leave-active:last-of-type { | |
| z-index: -1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment