griddles-ui-cardコンポーネントの最小限の要素を組み込んだテンプレート。version 0.1.0, 0.2.0 に対応。これらに chrome apps 用の manifest.json を加えるだけで chromeアプリとして動作する。
index.html
<!doctype html> <html> <head> <title>griddles-ui-card demo page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <script src="../../bower_components/platform/platform.js"></script> <link rel="import" href="../griddles-ui-card.html"> <link href="myApp.css" rel="stylesheet" type="text/css"> </head> <body unresolved> <h1>griddles-ui-card demo page</h1> <griddles-ui-card wrappedBy="document"></griddles-ui-card> <script src="myApp.js"></script> </body> </html>
myApp.css
html {
background-color: #E5E5E5;
overflow-y: scroll;
overflow-x: hidden;
}
body {
margin: 0px;
}
myApp.js
function griddlesAppInit() {
document.querySelector("griddles-ui-card").layout = {
'cardWidth': 190,
'cardMarginBottom': 4,
'streamMarginLeft': 2,
'streamMarginRight': 2,
'streamPaddingTop': 10,
'numberReadAtOnce': 20,
'displayFromTopLeftToBottomRight': 0.01
};
show_cards(6); // カードを6枚表示する。
}
function griddlesAppCardClicked(card) {
}
function show_cards(n) {
var cards = [];
for(var i = 0; i < n; i++) {
var card = {
'griddles_type': 'card', // または'photo_grid'
'shadow_depth': 1,
'src': '',
'contents': '<div>Hello!</div>',
'className': '',
'height': Math.floor(Math.random()*200) + 50,
'stream_index': false,
'insert_type': 'append',
'border_radius': 2,
'dataset': {'name': 'bar'}
};
cards.push(card);
}
document.querySelector("griddles-ui-card").cards = {'myCard': cards};
document.querySelector("griddles-ui-card").query = 'myCard';
}
もう少しシンプルになるといいのにな
