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

サンプル

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

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

Pattern (base6.png)

次に、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"
      }
    }

  }
};

Apricot manifest (js file)

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

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

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