Polymer-アプリのレイアウト

app-layout要素は、ツールバー、引き出し、ヘッダーなどのコンポーネントで構成されています。これらは、マークアップだけで高品質でレスポンシブなレイアウトを構築するために使用されます。次の表にいくつかの要素を示します。

Sr.No.	Elements & Description
1	app-box この要素はコンテナとして機能し、スクロール効果、スクロール位置に基づく視覚効果があります。
2	app-drawer これは、左右にスライドして出入りするナビゲーションドロワーです。
3	app-drawer-layout これにより、アプリの引き出しやその他のコンテンツが配置されます。
4	app-grid これは、カスタムプロパティを使用してレスポンシブで流動的なグリッドレイアウトを作成するために使用されます。
5	app-header この要素は、画面の上部でアプリツールバーのコンテナとして機能し、スクロール効果、スクロール位置に基づく視覚効果を備えています。
6	app-header-layout この要素は、アプリヘッダーやその他のコンテンツを配置するカバーとして機能します。
7	app-scrollpos-control この要素は、複数のページが同じドキュメントスクローラーを共有している場合に、スクロール位置を保存および復元するために使用されます。
8	app-toolbar これは、ラベル付け、ナビゲーション、検索、およびその他のアクションに使用できるアイテムを含む水平ツールバーです。

例

app-layout要素を使用するには、コマンドプロンプトで次のコマンドを使用してプロジェクトディレクトリに移動する必要があります。

bower install PolymerElements/app-layout --save

上記のコマンドは、app-layout要素を bower_components フォルダーにインストールします。次に、 indexlfile で<link>タグを使用してファイルをインポートする必要があります。

<link rel = "import" href = "/bower_components/app-layout/app-layoutl">
<base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/app-layout/v1.0.1/app-layout/">
<script src = "../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel = "import" href = "app-header/app-headerl">
<link rel = "import" href = "app-toolbar/app-toolbarl">
<link rel = "import" href = "app-box/app-boxl">
<link rel = "import" href = "demo/sample-contentl">
<link rel = "import" href = "../iron-icons/iron-iconsl">

<style is = "custom-style">
   html, body {
      margin: 0;
      font-family: 'Roboto', 'Noto', sans-serif;
      -webkit-font-smoothing: antialiased;
      background: #f1f1f1;
      max-height: 368px;
   }
   app-toolbar {
      background-color: #4285f4;
      color: #fff;
   }
   paper-icon-button + [main-title] {
      margin-left: 24px;
   }
   paper-progress {
      display: block;
      width: 100%;
      --paper-progress-active-color: rgba(255, 255, 255, 0.5);
      --paper-progress-container-color: transparent;
   }
   app-header {
      @apply(--layout-fixed-top);
      color: #fff;
      --app-header-background-rear-layer: {
         background-color: green;
      };
   }
   sample-content {
      padding-top: 64px;
   }
</style>

<app-header reveals>
   <app-toolbar>
      <div main-title>First App</div>
   </app-toolbar>
</app-header>

<sample-content></sample-content><br>
<app-box style = "height: 100px;border-style: groove;">
   <div main-title>Welcome to finddevguides</div>
</app-box>

出力

Polymerサーバーを更新すると、以下が出力されます。

app_layout

Polymer-app-layout

Polymer-アプリのレイアウト

例

出力