Настройка меню React Navbar
7 ноября 2022 г.Введение
В этой статье показано, как настроить главное меню панели навигации реагирования. В нем показано, как настроить меню, а затем как оформить его.
Предпосылки
В этой статье предполагается, что вы прошли этапы предыдущее руководство, установили библиотеку Superflows, включили панель навигации по умолчанию и запустили ее, а затем добавили информацию о своем бренде. В этом руководстве мы продвигаемся вперед.
Шаг 1. Настройка меню
Настроить меню довольно просто. Составьте необходимый объект JSON и установите его в реквизит меню. Я показываю пример здесь.
return (
<div>
<SfNav
brand="Your Brand"
menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}/>
</div>
);
Это выглядит следующим образом:
Шаг 2. Обработка обратного вызова
Панель навигации обеспечивает обратный вызов после нажатия на любое меню или подменю. Подпишитесь на него, чтобы получать события обратного вызова. Как показано ниже:
return (
<div>
<SfNav
brand="Your Brand"
menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}
onMenuClicked={(value) => {alert(value)}}
/>
</div>
);
Шаг 3. Оформление
Затем вы можете настроить внешний вид с помощью встроенного CSS или имен классов. Панель навигации Superflows предоставляет реквизиты, облегчающие настройку. Пример показан ниже:
return (
<div>
<SfNav
brand="Your Brand"
menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}
onMenuClicked={(value) => {alert(value)}}
stylesMenu={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px'}}
stylesSubMenu={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', border: 'solid 1px gray'}}
stylesMenuMobile={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
stylesMenuMobileSelected={{backgroundColor: 'white', color: 'black', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
stylesSubMenuMobile={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
/>
</div>
);
Это выглядит следующим образом:
Справочные ссылки
Видеоруководство
https://www.youtube.com/watch?v=h-wR_oLW60U?embedable =правда
Дополнительная литература
Вы уже видели, как начать работу с панелью навигации, как вставить в нее информацию о бренде, а теперь как настроить меню. В следующем руководстве показано, как использовать и настраивать параметры поиска.
Заключение
В этой статье показано, как настроить главное меню с помощью объекта JSON. Кроме того, как обрабатывать обратные вызовы меню и, наконец, как его настраивать и стилизовать.
Также опубликовано здесь
Оригинал