应用布局

首先，我们需要为我们的应用创建一个包含应用骨架的 index.html 文件。Framework7 Svelte 旨在与 webpack 等打包工具一起使用，因此 index.html 的样式和脚本应该由打包工具自动注入/生成。

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <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">
    <!-- Color theme for statusbar (Android only) -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Framework7 styles -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>

<div id="app"></div> 是您的主要应用骨架所在的位置。您可以将它的内容作为组件进行挂载，或者（仅仅是举个例子）我们可以在这个 div 内部直接开始编写应用骨架。

基本布局

让我们看一下最基本的应用组件布局

<!-- Main Framework7 App component where we pass Framework7 params -->
<App theme="auto" name="My App">

  <!-- Your main view, should have "main" prop -->
  <View main>
    <!--  Initial Page -->
    <Page>
      <!-- Top Navbar -->
      <Navbar title="Awesome App"></Navbar>
      <!-- Toolbar -->
      <Toolbar bottom>
        <Link>Link 1</Link>
        <Link>Link 2</Link>
      </Toolbar>
      <!-- Page Content -->
      <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>

高级布局

现在，让我们看一下更高级的布局，我们将在这个布局中添加包含视图和弹出窗口的侧边面板。

<!-- Main Framework7 App component where we pass Framework7 params -->
<App theme="auto" name="My App">

  <!-- Left Panel with "cover" effect -->
  <Panel left cover>
    <View>
      <Page>
        <Navbar title="Left Panel"></Navbar>
        <Block>
          <p>Here comes the left panel text</p>
        </Block>
      </Page>
    </View>
  </Panel>

  <!-- Right Panel with "reveal" effect -->
  <Panel right reveal>
    <View>
      <Page>
        <Navbar title="Right Panel"></Navbar>
        <Block>
          <p>Here comes the right panel text</p>
        </Block>
      </Page>
    </View>
  </Panel>

  <!-- Main view -->
  <View main>
    <Page>
      <Navbar title="Awesome App"></Navbar>
      <!-- Page content -->
      <Block>
        <p>Here comes main view page text</p>
      </Block>
      <!-- Buttons to open panels -->
      <Block class="grid grid-cols-2 grid-gap">
        <Button panelOpen="left">Left Panel</Button>
        <Button panelOpen="right">Right Panel</Button>
      </Block>
      <!-- Button to open popup -->
      <Button popupOpen="#my-popup">Open Popup</Button>
    </Page>
  </View>

  <!-- Popup. All modals should be outside of Views -->
  <Popup id="my-popup">
    <View>
      <Page>
        <Navbar title="Popup">
          <!-- Link to close 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, Button, Popup, Link } from 'framework7-svelte';
</script>

您可以在相应的章节中了解更多关于视图、导航栏、工具栏、页面、面板和其他组件的信息。

初始化应用

现在，我们有了基本的模板，我们需要初始化我们的应用.

改进此文档