アプリUIデザインキットApricotは、次バージョンから、いくつかのPolymerのPaper-elementsに対応する予定です。これを用いるとマテリアルデザインなHTML要素を簡単に配置することができるようになります。
サンプル
以下はpaper-fab
(floating action button)*1タグを表示させる例です。
まずは、これまで通りペイントソフトでPattern*2を描きます。
次に、Pattern画像内のピンク色のBrickをpaper-fab
に変身させるために、Apricot manifestファイルに下記のようなrole
とproperty
に関する設定を書きます。
apricot.manifest = { "base6": { "brick_0": { ...省略... }, "brick_1": { // オレンジ色のBrick ...省略... } "brick_2": { // ピンク色のBrick "role": "paper-fab", "property": { icon: "add" } } } };
これまで「"role": "html-*"」のように書いていた部分を「"role": "paper-*"」のようにするだけで、paperタグを指定できます。
あとは、ビルドコマンドを実行して終了です。
無事にピンク色のpaper-fabが表示されました。
そろそろサンプルアプリも作ってみたいと思っています。