v6.3.3
Support Framework7
logo_github stars forks
スポンサー
Support Framework7

アプリのレイアウト

アプリのために最初にすべきことは、アプリのスケルトンを含むindex.htmlファイルを作成することです。Framework7 Vueは、webpackのようなバンドルツールと一緒に使うことを想定しているので、index.htmlのスタイルやスクリプトは、自動的に注入/生成されるようになっています。

<!DOCTYPE html>
<html>
  <head>
    <!-- 必要なmetaタグ-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- ステータスバーのカラーテーマ（Androidのみ -->
    <meta name="theme-color" content="#2196f3">
    <!-- アプリのタイトル -->
    <title>My App</title>
    <!-- Framework7のスタイル -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- アプリのルート要素 -->
    <div id="app"></div>

    <!-- スクリプトは自動的に注入されます。 -->
  </body>
</html>

`は、アプリのメインとなるスケルトンを格納する場所です。このコンテンツをコンポーネントとして実装することもできますし、（例として）このdivの中にアプリの骨格を書き始めることもできます。

基本的なレイアウト

非常に基本的なアプリコンポーネントのレイアウトを見てみましょう。

<template>
  <!-- メインのFramework7 Appコンポーネントで、Framework7のパラメータを渡します。 -->
  <f7-app v-bind="{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }">
    <!-- メインビューは、"main "プロップを持ちます。 -->
    <f7-view main>
      <!-- 初期ページ -->
      <f7-page>
        <!-- トップナビバー-->
        <f7-navbar title="Awesome App"></f7-navbar>
        <!-- ツールバー-->
        <f7-toolbar bottom>
          <f7-link>Link 1</f7-link>
          <f7-link>Link 2</f7-link>
        </f7-toolbar>
        <!-- ページコンテンツ -->
        <p>Page content goes here</p>
        <f7-link href="/about/">About App</f7-link>
      </f7-page>
    </f7-view>
  </f7-app>
</template>

高度なレイアウト

ここでは、ビューやポップアップを備えたサイドパネルを追加する、より高度なレイアウトを見てみましょう。

<template>
  <!-- Framework7のパラメータを渡す、Framework7アプリのメインコンポーネント -->
  <f7-app v-bind="{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }">

    <!-- カバー "効果のある左パネル -->
    <f7-panel left cover>
      <f7-view>
        <f7-page>
          <f7-navbar title="Left Panel"></f7-navbar>
          <f7-block>
            <p>Here comes the left panel text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- 明示」効果のある右パネル -->
    <f7-panel right reveal>
      <f7-view>
        <f7-page>
          <f7-navbar title="Right Panel"></f7-navbar>
          <f7-block>
            <p>Here comes the right panel text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- メインビュー-->
    <f7-view main>
      <f7-page>
        <f7-navbar title="Awesome App"></f7-navbar>
        <!-- ページコンテンツ -->
        <f7-block>
          <p>Here comes main view page text</p>
        </f7-block>
        <!-- パネルを開くボタン -->
        <f7-row>
          <f7-col>
            <f7-button panel-open="left">Left Panel</f7-button>
          </f7-col>
          <f7-col>
            <f7-button panel-open="right">Right Panel</f7-button>
          </f7-col>
        </f7-row>
        <!-- ポップアップを開くためのボタン -->
        <f7-button popup-open="#my-popup">Open Popup</f7-button>
      </f7-page>
    </f7-view>

    <!-- ポップアップ。すべてのモーダルはビューの外にあるべきです -->
    <f7-popup id="my-popup">
      <f7-view>
        <f7-page>
          <f7-navbar title="Popup">
            <!-- ポップアップを閉じるためのリンク -->
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>
            <p>Here comes popup text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>
  </f7-app>
</template>

ビュー、ナビバー、ツールバー、ページ、パネル、その他のコンポーネントについては、それぞれのセクションで詳しく説明しています。

アプリの初期化

基本的なテンプレートができたら、アプリの初期化を my-app.js （例）で行う必要があります。