Materialise CSS 示例在 Blazor WASM 中不起作用

Question

我正在尝试将 css 的物化框架与 Blazor 应用程序一起使用，但是，当我 copy/paste 将一些示例放入布局、组件等中时，我没有得到Materialize 在示例中显示的内容。在开发工具中没有任何可以识别的 CSS/JS 加载或控制台错误，但似乎有些东西没有加载，因为许多组件没有工作，如示例所示。

例如，选项卡 指示器 出现在活动选项卡下，当您 select 一个时，它会从一个选项卡跳到另一个选项卡。

布局页面：

@inherits LayoutComponentBase

<div class="main">
    <nav class="nav-extended">
        <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" 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>
        </ul>
        </div>
        <div class="nav-content">
        <ul class="tabs tabs-transparent">
            <li class="tab"><a href="#test1">Test 1</a></li>
            <li class="tab"><a class="" href="#test2">Test 2</a></li>
            <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
            <li class="tab"><a href="#test4">Test 4</a></li>
        </ul>
        </div>
    </nav>

    <div class="content px-4">
        @Body
    </div>
</div>

编辑

看起来 M.AutoInit() 没有正常发射。有人可以指出调用该函数的最佳位置在哪里吗？我尝试了

document.onload = M.AutoInit();

在 index.html 页面和我的组件上的互操作 JS

@code {
    ...
    protected override void OnInitialized()
    {
        JSRuntime.Invoke<string>("M.AutoInit");
    }
    ...
}

都没有用，但也许我做错了 JSInterop，在文档中找不到与我正在尝试做的类似的明确示例。任何建议或指示都会很棒！

Answer 1

这对我有用（非常重要的异步等待，所以如果你有任何错误，异常会正确地抛出到你的浏览器控制台）

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {

        await JSRuntime.InvokeVoidAsync("M.AutoInit");

    }
}

Answer 2

在用于初始化实体化元素的静态 JavaScript 文件中，添加 AutoInit 方法以在 DOMContentLoaded 事件侦听器上首先加载。

考虑这个初始化 Materialize Sidenav:

的例子

中Sidenav.razor:

<nav> <!-- navbar content here  -optional  --> </nav>

<ul id="slide-out" class="sidenav">
    <li>
        <div class="user-view">
            <div class="background">
                <img width="300" src="office.jpg">
            </div>
            <a href="#user">
                <img class="circle" width="50"
                     src="user_female.svg.png">
            </a>
            <a href="#name"><span class="white-text name">John Doe</span></a>
            <a href="#email"><span class="white-text email">xyz@xyz.com</span></a>
        </div>
    </li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Sub-header</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

中main.js:

(function () {
    "use strict";

    var M = window.M || globalThis.M;

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

    document.addEventListener('DOMContentLoaded', function () {
        M.AutoInit();
        setTimeout(activateSideNav, 864);
    });

})();

中MainLayout.razor:

<Sidenav />
<div class="row">
    <div class="col s12 m12 l12 xl12">
        @Body
    </div>
</div>

还要确保在 _Host.cshtml

中正确引用了 Materialise 库

@page "/"
@namespace Example.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <base href="~/" />
    <link href="css/materialize/css/materialize.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <script src="_framework/blazor.server.js"></script>
    <script src="css/materialize/js/materialize.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

Materialise CSS 示例在 Blazor WASM 中不起作用

Materialize CSS examples are not working in Blazor WASM

css

c#

web-frontend

materialize

blazor

编辑