#daiizメモ

Scrapboxに夢中

Apricotのマテリアルデザイン対応作業を進めています

アプリUIデザインキットApricotは、次バージョンから、いくつかのPolymerのPaper-elementsに対応する予定です。これを用いるとマテリアルデザインなHTML要素を簡単に配置することができるようになります。

サンプル

以下はpaper-fab(floating action button)*1タグを表示させる例です。

まずは、これまで通りペイントソフトでPattern*2を描きます。

Pattern (base6.png)


次に、Pattern画像内のピンク色のBrickをpaper-fabに変身させるために、Apricot manifestファイルに下記のようなrolepropertyに関する設定を書きます。

apricot.manifest = {
  "base6": {
    "brick_0": {
       ...省略...
    },

    "brick_1": {
      // オレンジ色のBrick
      ...省略...
    }

    "brick_2": {
      // ピンク色のBrick
      "role": "paper-fab",
      "property": {
        icon: "add"
      }
    }

  }
};
Apricot manifest (js file)


これまで「"role": "html-*"」のように書いていた部分を「"role": "paper-*"」のようにするだけで、paperタグを指定できます。

あとは、ビルドコマンドを実行して終了です。

無事にピンク色のpaper-fabが表示されました。

Chrome App


そろそろサンプルアプリも作ってみたいと思っています。

*1:Inboxアプリの右下にあるような丸いボタン

*2:これまでは、UIのスケッチ画像のことをPartと呼んでいましたが、次バージョンからはPatternと改名します。