本日、HTMLのカスタムエレメント「griddles-ui-card」の最新バージョン(version 0.3.0)をGitHubにてリリースしました。
今回のバージョンから、griddles-ui-card
の子要素としてgriddle-card
を導入しました。これにより、JavaScriptを書かずにHTMLのみでカードを表示させることができるようになります。以下のコードは「Hello, world!」と書かれた高さ100pxのカードを表示する例です。
<griddles-ui-card query='sample'> <griddle-card height=100>Hello, world!</griddle-card> </griddles-ui-card>
これまでと同様に、JavaScriptでカードの表示を操作することも可能です。この場合でも、今回のバージョンで初めて実装されたmakeCard
関数を用いることで、より簡単にカードのデザインを書くことができるようになりました。
var g = document.querySelector('girddles-ui-card'); g.cardWidth = 200; //カードの横幅 g.cardMarginBottom = 16; //カードの下の余白 g.streamMarginLeft = 8; //カードの左の余白 g.streamMarginRight = 8; //カードの右の余白 g.streamPaddingTop = 10; //カードの上の余白 g.numberReadAtOnce = 20; //一度に表示するカードの枚数 var card; for(var i = 0; i < 100; i++) { card = g.apis.makeCard(null, 'T', "text"); //type card = g.apis.makeCard(card, 'R', 6); //borderRadius card = g.apis.makeCard(card, 'P', "#FFFFFF"); //paperColor card = g.apis.makeCard(card, 'H', 200); //height card = g.apis.makeCard(card, 'I', "append"); //insert card = g.apis.makeCard(card, 'S', 3); //shadowDepth card = g.apis.makeCard(card, 'C', "Hello!"); //content $('griddles-ui-card').append(card); //カードを登録する } g.query = "new_sample"; //100枚のカードを表示する
さらに、デモとして、新しい「griddles-ui-card」タグを使ったChromeアプリ*1も公開しました。こちらもGitHubのページからダウンロードできます。
「Griddle Card Designer」では、アプリ内でカードのデザインを指定するための値を直接編集して、表示する内容を変更することができます。是非お試しください。近日中にウェブ版のアプリも公開する予定です。
追記
- 下記のURLで「Griddle Card Designer」のウェブ版を公開しました。
http://griddles-card.appspot.com/GriddleCardDesigner/v0.3.0/index.html
*1:Chromeアプリの実行方法は、「Chrome Dev Editorで、開発版のChromeアプリを実行する方法 - daizの日記」を参照ください。