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

アプリのレイアウト

アプリのために最初にすべきことは、アプリのスケルトンを含むindex.htmlファイルを作成することです。Framework7 Svelteは、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の中にアプリの骨格を書き始めることもできます。

基本的なレイアウト

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

<!-- メインのFramework7 Appコンポーネントで、Framework7のパラメータを渡します。 -->
<App theme="auto" name="My App" id="com.demoapp.test">

  <!-- メインビューは、"main "プロップを持ちます。 -->
  <View main>
    <!--  初期ページ -->
    <Page>
      <!-- トップナビバー -->
      <Navbar title="Awesome App"></Navbar>
      <!-- ツールバー -->
      <Toolbar bottom>
        <Link>Link 1</Link>
        <Link>Link 2</Link>
      </Toolbar>
      <!-- ページコンテンツ -->
      <p>Page content goes here</p>
      <Link href="/about/">About App</Link>
    </Page>
  </View>
</App>
<script>
  import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-svelte';
</script>

高度なレイアウト

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

<!-- Framework7のパラメータを渡す、Framework7アプリのメインコンポーネント -->
<App theme="auto" name="My App" id="com.demoapp.test">

  <!-- カバー "効果のある左パネル -->
  <Panel left cover>
    <View>
      <Page>
        <Navbar title="Left Panel"></Navbar>
        <Block>
          <p>Here comes the left panel text</p>
        </Block>
      </Page>
    </View>
  </Panel>

  <!-- 明示」効果のある右パネル -->
  <Panel right reveal>
    <View>
      <Page>
        <Navbar title="Right Panel"></Navbar>
        <Block>
          <p>Here comes the right panel text</p>
        </Block>
      </Page>
    </View>
  </Panel>

  <!-- メインビュー -->
  <View main>
    <Page>
      <Navbar title="Awesome App"></Navbar>
      <!-- ページコンテンツ -->
      <Block>
        <p>Here comes main view page text</p>
      </Block>
      <!-- パネルを開くボタン -->
      <Row>
        <Col>
          <Button panelOpen="left">Left Panel</Button>
        </Col>
        <Col>
          <Button panelOpen="right">Right Panel</Button>
        </Col>
      </Row>
      <!-- ポップアップを開くためのボタン -->
      <Button popupOpen="#my-popup">Open Popup</Button>
    </Page>
  </View>

  <!-- ポップアップ。すべてのモーダルはビューの外にあるべきです -->
  <Popup id="my-popup">
    <View>
      <Page>
        <Navbar title="Popup">
          <!-- ポップアップを閉じるためのリンク -->
          <NavRight>
            <Link popupClose>Close</Link>
          </NavRight>
        </Navbar>
        <Block>
          <p>Here comes popup text</p>
        </Block>
      </Page>
    </View>
  </Popup>
</App>
<script>
  import { App, NavRight, Panel, View, Page, Navbar, Block, Row, Col, Button, Popup, Link } from 'framework7-svelte';
</script>

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

アプリの初期化

基本的なテンプレートができたところで、アプリの初期化を行う必要があります。