应用布局

我们应该为应用做的第一件事是创建带有应用骨架的 index.html 文件。Framework7 React 预计与捆绑器（例如 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 内直接开始编写应用骨架

基本布局

让我们看看非常基本的应用组件布局

// App.jsx
import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-react';

export default () => (
  // 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>
)

高级布局

现在，我们来看看更高级的布局，其中我们还将添加带有视图和弹出窗口的侧面板

// App.jsx

import { App, NavRight, Panel, View, Page, Navbar, Block, Button, Popup, Link } from 'framework7-react';

export default () => (
  /* 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 className="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>
)

您可以在相应部分中阅读有关视图、导航栏、工具栏、页面、面板和其他组件的更多信息。

初始化应用

现在，当我们有了基本模板时，我们需要（例如）在 my-app.js 中初始化我们的应用

改进此文档