Skip to content

Instantly share code, notes, and snippets.

@ryanjduffy
Last active August 29, 2015 14:20
Show Gist options
  • Save ryanjduffy/40e502173b90884f2d77 to your computer and use it in GitHub Desktop.
Save ryanjduffy/40e502173b90884f2d77 to your computer and use it in GitHub Desktop.
GridListImageItem + Badge Overlay
require('spotlight');
var
ready = require('enyo/ready'),
kind = require('enyo/kind'),
GridListImageItem = require('moonstone/GridListImageItem'),
ImageBadge = require('moonstone/ImageBadge');
ready(function () {
var C = kind({
classes: 'moon',
components: [
{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'overlay-top', ontap: 'itemTapped', components: [
{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
]},
{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'badge-right', ontap: 'itemTapped', components: [
{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
]},
{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'overlay-top badge-right', ontap: 'itemTapped', components: [
{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
]},
{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'overlay-transparent overlay-top badge-right', ontap: 'itemTapped', components: [
{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
]},
{name: 'result'}
],
itemTapped: function (sender, event) {
this.$.result.set('content', 'Item Tapped: ' + sender.id);
},
badgeTapped: function (sender, event) {
this.$.result.set('content', 'Badge Tapped: ' + sender.id);
return true;
}
});
new C().renderInto(document.body);
});
.moon-gridlist-imageitem {
height: 400px;
width: 300px;
margin: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment