Я пытаюсь использовать инфраструктуру материализации для 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, не смог найти точный пример, похожий на то, что я пытаюсь сделать, в документах. Любые предложения или указатели будут великолепны!