Polymer Layoutエレメントで簡単レイアウト構築

この記事は、「Google Material Design をPolymerで表現する」の連載記事です。
「Google Material Designとは」や、その他の関連記事は、下記より参照ください。

 

これまでの2回の記事でPolymerのエレメントを利用しました。
今回はもう少し具体的に、エレメントを利用していきたいと思います。

Polymerのエレメントガイドを覗くと、以下の項目があります。

  • Layout elements
  • Using core icons
  • Material design with Polymer

今回は、レイアウトのためのエレメントを使いたいと思います。
次回の記事で、Iconのためのエレメントを紹介し、最後に今回の特集のタイトルにもあります、「Material design with polymer」の紹介をさせていただこうかと思っています。

 

今回のゴール

 

今回はレイアウトのためのエレメントを読み込みます。
デモを用意しましたので、確認してみてください。

 

記事を読ませるためのレイアウト、スクロールするとヘッダーが消えます。

 

Polymerサイト風レイアウト

 

まず1つ目に紹介するのが、Polymerサイト風のレイアウトです。レイアウトエレメントガイドで紹介されている、<core-scaffold>です。
core-scaffold/core-scaffold.htmlより、レイアウトのエレメントを読み込みます。

その他に、<core-drawer-panel>、<core-header-panel>、<core-toolbar>を読み込んで使用しますが、core-scaffoldがこれらのエレメントを読み込むので、importをする必要ありません。

 

今回読み込むエレメントは、下記の3つです。

<link rel="import" href="core-menu/core-menu.html">
<!-- アイコン用のエレメント -->
<link rel="import" href="core-item/core-item.html">
<!-- 今回利用するレイアウト用のエレメント -->
<link rel="import" href="core-scaffold/core-scaffold.html">

 

<core-scaffold>
  <core-header-panel navigation flex mode="seamed">
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="One" icon="apps">
         <a href="#settings" target="_self"></a>
      </core-item>
      <core-item label="Two" icon="apps"></core-item>
      <core-item label="Three" icon="apps"></core-item>
    </core-menu>
  </core-header-panel>

  <div tool mode="waterfall-tall">Title</div>

  <div class="content">
      If drawer is hidden, press button to display drawer.
  </div>
</core-scaffold>

 

  1. まず全体を、<core-scaffold></core-scaffold>で囲みます。
  2. <core-header-panel>で、ヘッダーを読み込みます。

    mod=""で、モードを選択します。デフォルトでは、「standard」が選択されています。
    http://www.polymer-project.org/components/core-header-panel/demo.html

    navigation:ナビゲーションを出力
    flex:画面一杯にヘッダーを広げます。下記のコードの変わりになります。

    html, body {
      height: 100%;
      margin: 0;
    }
    core-header-panel {
      height: 100%;
    }
    ​
  3. <core-menu>で、メユーを作成します。

完成したソースコードは、デモを参照ください。

 

core-scroll-header-panelレイアウト

 

次に紹介するのが、レイアウトエレメントガイドには載っていなかったのですが、とてもシンプルな見た目と、記事を読ませるために余計なものを省くことが上手く表現されているなと感じたので紹介いたします。

  1. <core-scroll-header-panel>を読み込みます。
    <link rel="import" href="core-scroll-header-panel/core-scroll-header-panel.html">
    
    
  2. ベーシックなテンプレート
    <body unresolved>
      <core-scroll-header-panel condenses flex>
    
        <core-toolbar class="tall">
              <div class="bottom indent title">Title</div>
        </core-toolbar>
    
        <div class="content">
          <p>コンテンツエリア</p>
        </div>
    </core-scroll-header-panel>
    </body>
    

    core-scroll-header-panelに、下記のアトリビュートを指定しています。
    condenses:画面スクロール時のメニュー表示が変わります。
    flex:前述した通りです。

    その他はこちら
    http://www.polymer-project.org/docs/elements/core-elements.html#core-scroll-header-panel

    完成版のソースはデモより確認ください。

 

以上でレイアウトのエレメントの紹介を終わらせていただきます。
次回は、アイコン用のエレメントの紹介です。

スクロールしているときにヘッダーなどの情報は不要ですし、少し戻るとヘッダーが現れます。記事を読ませるためのUIと、操作しやすいUIが良いですね。今度使ってみたいなと感じました。

 

その他の記事(今後の公開予定)

 

[Material Designについて]

  1. Material Designとは(Introduction)

[Polymerを使ってMaterial Designを表現する]

  1. Polymerとは、初めてのPolymer
  2. [エレメント]
    Polymerエレメント、Jsonの読み込み

    Polymer Layoutエレメント
    Polymer Iconエレメントと、スタイル
  3. Polymerを使って、Material Designを表現しよう

※ 紹介する項目は書き進めるうちに、増えていくかと思います。週一くらいを目処に、記事を公開していきたいと思います。

 
 

このエントリーをはてなブックマークに追加

関連タグ:

この記事をシェアする

次へ
前へ