Материализация CSS примеров не работает в Blazor WASM - PullRequest
1 голос
/ 03 февраля 2020

Я пытаюсь использовать инфраструктуру материализации для css с приложением Blazor, однако, когда я копирую / вставляю некоторые примеры в макет, компонент и т. Д. c Я не понимаю, что Materialise показывает на примере. Нет никаких ошибок загрузки CSS / JS или ошибок консоли, которые могут быть обнаружены в инструментах разработки, но кажется, что что-то не загружается, потому что многие компоненты не работают, как показывают примеры.

Например, вкладка индикатор , которая отображается под активной вкладкой и переходит от вкладки к вкладке при ее выборе.

страница макета:

@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();

на индексной странице. html страница и взаимодействие JS на моем компоненте

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

Ни один из них не работает, но, возможно, я неправильно выполняю JSInterop, не смог найти точный пример, похожий на то, что я пытаюсь сделать, в документах. Любые предложения или указатели будут великолепны!

...