Материализация CSS Навбар и Сиденав + Angular 9

Question

Итак, я пытаюсь создать приложение, похожее на панель управления Angular для школьного проекта. Я делаю Angular компонентов для модульности сайта. Пока у меня есть навигационная панель и sidenav, но боковая навигация немного проблематична c. Я хочу, чтобы боковая навигация присутствовала на экране в полном размере, и сворачивалась на меньшем экране. Когда я сворачиваю экран, строки меню бургера не открываются. Я не очень понимаю, почему это происходит. Из того, что я собрал с документами, я должен инициализировать плагин.

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

, который у меня есть в теге script внизу страницы. Я смоделировал свой код в Codepen здесь . Он не «разбит на части», как это было бы в Angular, но он все понял. Если бы кто-нибудь мог помочь с этим, я был бы благодарен. Спасибо

Answer 1

Удалите переменную необъявленных опций.

Документация материализации немного сбивает с толку - приведенная в списке инициализация javascript на самом деле сломает ваш код и выловит много людей , Поэтому удалите его, если вам просто нужна функциональность sidenav по умолчанию.

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

Если вам нужно передать какие-либо параметры, объявите это следующим образом:

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

options - это объект - пары «ключ-значение» для настройки компонента, шаблон, который вы увидите во время материализации компонентов. Вот список параметров, которые можно настроить в момент инициализации. Вы можете расположить sidenav на другой стороне экрана, запускать функции при его открытии, когда он закрывается и т. Д. c.

https://materializecss.com/sidenav.html#options

В качестве стороны примечание - ВСЕГДА проверяйте консоль на наличие подсказок при отладке. Это из вашего кода:

Uncaught ReferenceError: параметры не определены в HTMLDocument. (vYOeqEZ: 61)

Также, последнее замечание - вы упомянули компонентность. Прочтите эту статью об использовании Materialise с React. Это пролит свет на эту тему.

https://medium.com/@mattdlockyer / youre-materialize- css -wrong-470b593e78e9

Вы также пропустили cdn materialicons, поэтому ваши иконки не отображаются:

https://materializecss.com/icons.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">