时间戳

首页 > 解决方案 > 如何从 Svelte 中的 Materialize CSS 移动折叠导航栏？

mobile - 如何从 Svelte 中的 Materialize CSS 移动折叠导航栏？

问题描述

我正在尝试在我的 Svelte 项目中使用 Materialize CSS 中的 javascript 函数。我有一个在 app.svelte 中调用的导航栏。我打电话给 M.AutoInit(); 在 app.svelte 的脚本标签中，如下所示：

<script>
  import "../node_modules/materialize-css/dist/css/materialize.min.css";
  import "../node_modules/materialize-css/dist/js/materialize.min.js";
  import { Router, Route } from "svelte-routing";
  import { setupI18n, isLocaleLoaded, locale } from "./services/i18n";
  import { derived } from "svelte/store";
  import Home from "./pages/Home.svelte";
  import About from "./pages/About.svelte";
  import Navbar from "./layout/Navbar.svelte";
  $: if (!$isLocaleLoaded) {
    setupI18n({ withLocale: "jp" });
  }

  M.AutoInit();
</script>

{#if $isLocaleLoaded}
  <Router>
    <Navbar />
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
{:else}
  <p>Loading...</p>
{/if}

我在我的 Navbar.svelte 文件中添加了所需的 javascript，就像在物化 css 文档中一样。

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

但是单击移动汉堡包按钮不会带出侧面菜单。此外，浏览器控制台说“选项”没有定义。

标签： mobilenavbarmaterializesvelte

解决方案

你好 stackoverflow 和苗条的社区。我已经解决了上述问题，并将在此处记录我的步骤：

在我的 Navbar.svelte 文件中，我将 javascript 重写为一个函数：

  function mobileNav() {
    var elems = document.querySelectorAll(".sidenav");
    var instances = M.Sidenav.init(elems);
  }

然后，我通过将“on:click={mobileNav}”添加到汉堡包按钮，将功能绑定到移动汉堡包按钮，这在 svelte 中是可能的！这里它使用导航栏，如文档中所示：

 <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger" on:click={mobileNav}><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>

在导航栏文档中，该函数采用参数（元素、选项），但删除选项完全解决了问题。

推荐阅读