Skip to content

Instantly share code, notes, and snippets.

@falexandre

falexandre/Scroll Horizontal ionic com thumbnail

Forked from anonymous/daAyx.markdown
Last active August 29, 2015 14:18
Show Gist options
  • Save falexandre/10772d4164909cb74eaa to your computer and use it in GitHub Desktop.
Save falexandre/10772d4164909cb74eaa to your computer and use it in GitHub Desktop.
Download ZIP
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>Apps </title>
<link href="http://code.ionicframework.com/0.9.26/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="BrandCtrl">
<ion-content>
<ion-list scroll="false">
<ion-item ng-repeat="brand in brands"
item="brand">
{{brand.title}}
<br>
<br>
<ion-scroll direction="x">
<div ng-repeat="app in brand.apps" item="app" style='display: inline-block; margin: 10px;'>
<!-- Adicionado para teste e funcionou, litagem na horizontal -->
<a class="item item-thumbnail-left" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
<!-- FIM Adicionado para teste e funcionou, litagem na horizontal -->
<br>
<br>
</div>
</ion-scroll>
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
Raw
script.js
angular.module('ionicApp', ['ionic'])
.controller('BrandCtrl', function($scope) {
$scope.brands = [
{title: "Brand 1", apps: [
{icon: 'ion-heart', title: 'Heart'}
, {icon: 'ion-medkit', title: 'Medkit'}
, {icon: 'ion-pinpoint', title: 'Pinpoint'}
, {icon: 'ion-pizza', title: 'Pizza'}
]}
, {title: "Brand 2"}
, {title: "Brand 3"}
, {title: "Brand 4"}
, {title: "Brand 5", apps: [
{icon: 'ion-female', title: 'Female'}
, {icon: 'ion-bug', title: 'Bug'}
, {icon: 'ion-calculator', title: 'Calculator'}
, {icon: 'ion-earth', title: 'Earth'}
, {icon: 'ion-plane', title: 'Plane'}
]}
, {title: "Brand 6"}
, {title: "Brand 7"}
];
})
Raw
Scroll Horizontal ionic com thumbnail
daAyx
-----
A [Pen](http://codepen.io/anon/pen/daAyx) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).
[License](http://codepen.io/anon/pen/daAyx/license).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment