Framework7 和 Material Design：样式未渲染答案

【问题标题】：Framework7 and Material Design: Styling not renderedFramework7 和 Material Design：样式未渲染
【发布时间】：2018-12-08 06:38:38
【问题描述】：

我正在使用 Framework7 构建我的第一个 Android 应用。但是，当我使用https://www.tutorialspoint.com/framework7/navbar_basic.htm 中提供的示例，并使用对应于最新版本 Framework7（3.6.0 而不是 1.4.2）的 CDN 时，我的网页只是呈现为 HTML，没有任何样式。

我的代码：

<!DOCTYPE html>
<html class="with-statusbar-overlay">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Notifications</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/css/framework7.min.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages navbar-fixed">
               <div data-page="home" class="page">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="center">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
                        <p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/js/framework7.min.js"></script>
      <script>
      </script>
   </body>
</html>

【问题讨论】：

标签： javascript android html css html-framework-7

【解决方案1】：

这个问题是因为你不是初始化应用程序，你也没有设置应用程序包装器，让我们检查一下example

您可以在此处找到 F7 的应用程序初始化：

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

应用 Html 布局：

<div id="app">
<div class="views">
         <div class="view view-main">
            <div class="pages navbar-fixed">
               <div data-page="home" class="page">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="center">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
                        <p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
</div>

注意：我建议你从 here 嵌套的 toutrialpoint 网站开始。

参考：

Init F7 App

App Layout

【讨论】：