Блог

Главная - Вопросы по программированию - Материализовать панель навигации: как отобразить те же ссылки на панели навигации на мобильном устройстве с помощью боковой панели

Материализовать панель навигации: как отобразить те же ссылки на панели навигации на мобильном устройстве с помощью боковой панели

#html #css #material-design #navbar

#HTML #css #материал-дизайн #панель навигации

Вопрос:

Я пытаюсь использовать material css для создания ссылок на панели навигации, но то, что я прочитал до сих пор, я должен написать отдельный код (html-разметку) для мобильного устройства, почему это так.

Мой вопрос в том, почему мне нужно повторять одни и те же «ссылки на панели навигации» два раза, если я хочу отображать одни и те же ссылки на панели навигации на мобильном устройстве.

   <nav>
    <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 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>

введите описание изображения здесь

Комментарии:

1. Один из вариантов — переместить все в автономный компонент, поэтому вы предоставляете ссылки в виде @Input(), а затем просматриваете их, чтобы добавить в свою форму.

2. это простые «статические ссылки», как вы могли видеть на прикрепленном изображении.

3. Да, но перемещение их в компонент делает репликацию не такой сложной для изменения, проверки и т. Д. В текущем навигаторе вам нужно дважды перечислить их в компоненте, на который вы ссылаетесь.

4. не перечисляя их дважды, нет другого способа !.. Ссылки появляются динамически, если я перечисляю их дважды, то же самое я должен сделать для серверной части. это было бы не лучшей практикой.

5. Я не знаю другого способа, поскольку компонент, который вы используете, и который я использовал, имеет двойные записи. Возможно, есть сторонний компонент, который скрывает это. Вот почему я предлагаю компонент с сервисом, поскольку это будет единичное появление, и разделите эту информацию на два места, поскольку вы просто вставляете туда компонент. HTML содержит 2 строки (по 1 для каждого раздела с компонентом), и никакой другой код не удваивается.