マテリアルデザインのカードUIを実現するHTMLタグ「griddles-ui-card」の新バージョンをリリースしました

本日、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」では、アプリ内でカードのデザインを指定するための値を直接編集して、表示する内容を変更することができます。是非お試しください。近日中にウェブ版のアプリも公開する予定です。

f:id:daiiz:20141109224123p:plain