Skip to content

Instantly share code, notes, and snippets.

@kingflurkel
Created July 7, 2014 14:25
Show Gist options
  • Save kingflurkel/ee4eca24413f75a28694 to your computer and use it in GitHub Desktop.
Save kingflurkel/ee4eca24413f75a28694 to your computer and use it in GitHub Desktop.
Trying to get juice to work...
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/juicy-tile-list/src/juicy-tile-list.html">
<link rel="import" href="/aos-elements/aos-content/aos-content.html">
<link rel="import" href="/aos-elements/aos-content-item/aos-content-item.html">
<link rel="import" href="/aos-elements/aos-packary/aos-packary.html">
<polymer-element name="aos-content-list">
<template>
<link rel="stylesheet" href="/css/styleguide.css">
<style>
aos-content-item {
background-color: white;
padding: 25px;
margin: 20px;
display: block;
}
</style>
<!-- Get json feed -->
<aos-content items="{{items}}" id="service"></aos-content>
<juicy-tile-list>
<template repeat="{{item in items}}">
<aos-content-item titel="{{item.title}}" tekst="{{item.snippets[1].body}}" class="item">
</aos-content-item>
</template>
</juicy-tile-list>
<script type="text/javascript">
model = {
items:[
{
desc: "first",
attr: "a"
},
{
desc: "second",
attr: "b"
},
{
desc: "third",
attr: "c"
},
{
desc: "forth",
attr: "d"
}
]
};
document.addEventListener("polymer-ready", function(){
document.querySelector("template").model = model;
});
</script>
</template>
<script>
Polymer('aos-content-list', {
});
</script>
</polymer-element>
@tomalec
Copy link

tomalec commented Jul 8, 2014

I'm not entirely sure what your aos- elements are supposed to do. Here https://gist.github.com/tomalec/d9107cc91b8bb71a93ec you have an example how to use juicy-tile-list inside another custom element.
Probably what you missed is that, juicy-tile-list is display: inline-block; by default so you need to give some initial dimension constraint to pack. So one of the solution could be to set juicy-tile-list { width: 100% }.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment