Прочитайте этот пост с подсветкой синтаксиса кода на Coffeeclass.io.
Введение
Если вы знакомы с Bootstrap, вы знаете, как легко создать адаптивную панель навигации. В Чакре-UI нет встроенного готового решения. В этом посте мы создадим адаптивный компонент панели навигации, который вы сможете использовать в своем приложении React.
Не стесняйтесь просмотреть мою видеоверсию этой статьи.
Идея
Мы создадим 2 панели навигации и будем использовать useState для динамического изменения свойства css display, чтобы скрывать и отображать панель навигации на настольных и мобильных устройствах.
Настройка
В этом примере мы будем использовать Next.js, но он работает для любой среды, основанной на реакции. Перейдите к репозиторию Next.js GitHub и клонируйте их начальный пример с помощью Chakra-UI. Если вы не хотите покидать эту страницу, используйте команду yarn create next-app — example with-chakra-ui with-chakra-ui-app.
Откройте это в предпочитаемой вами IDE — у меня VSCode. Внутри src/components откройте компонент DarkModeSwitch. Это единственный файл, который мы будем изменять.
Импорт
Мы начнем с импорта всего, что нам нужно.
Добавление содержимого рабочего стола
Во-первых, оберните все внутри элемента Flex. Затем добавьте приведенный ниже код.
Добавление мобильного контента
Это просто панель навигации на рабочем столе. Мы добавим мобильный контент под комментарием mobile content. Давайте сделаем это сейчас.
Использование useState для открытия и закрытия навигации
Теперь, когда у нас есть контент, нам нужен способ его показать. Для этого мы можем использовать `useState`. Перед оператором возврата добавьте следующую строку:
const [display, changeDisplay] = useState(‘none’)
Теперь у нас есть переменная display, первоначально установленная на none, и метод changeDisplay, который мы можем использовать для ее изменения (изменения состояния).
Добавим это в наш код. Обратите внимание, я пишу только компоненты, которые мы меняем ниже.
Теперь мы должны иметь возможность открывать и закрывать меню! Хотя это выглядит немного неряшливо. Давайте добавим стили в файл Flex.
Важные стили, которые мы добавили:
- Установка высоты на 100vh
- Установка ширины на 100vw
- Установка фиксированного положения
- Делаем z-index 20, чтобы он был над содержимым страницы
- Установка сверху и слева на 0
- Установка отображения на нашу динамическую переменную отображения.
Остальные добавленные стили субъективны.
Завершенный код
И это все! Вот завершенный код:
Я призываю вас поиграть с этим и изменить внешний вид. Может быть, сделать его раскрывающимся, а не заполнять всю страницу, или использовать кадрирование, чтобы добавить анимацию. Если вам понравилась эта статья, не стесняйтесь заглянуть на мой канал на YouTube, где я публикую кучу руководств по программированию!
