В моих последних нескольких проектах React мне понадобилась простая панель вне холста. Один был для мобильного меню на моем сайте-портфолио, а другой — для веб-приложения, которое я создавал на своей основной работе в лондонском местном органе власти. Функционал этих панелей в обоих проектах был довольно прост. Для мобильной навигации панель открывалась и отображалась на холсте при нажатии меню гамбургера и закрывалась и возвращалась за пределы холста при переходе на другую страницу моего веб-сайта. Веб-приложение, которое я создавал, открывалось при нажатии строки в таблице данных и закрывалось при нажатии кнопки закрытия на панели. Все достаточно просто…
Однако в случае с веб-приложением мне было поручено создать его с помощью системы проектирования Microsoft Fluent UI. Сначала я пытался использовать панельный компонент в дизайн-системе, но чувствовал, что все предоставленные опции были излишними и требовали большого количества стандартного кода для чего-то такого простого. FluentUI также использует Typescript, и я не использовал Typescript в этом проекте, так как это было простое доказательство концептуальной части работы и опять же означало больше шаблонного кода.
В конце концов я создал свой собственный компонент и смог повторно использовать его в проектах. Итак, вот мой код и как я это сделал.
Я начал с создания компонента панели. Этот компонент будет использовать переключатель и свойство события. Свойство toggle просто переключает класс открытия/закрытия элемента. Анимация обрабатывается с помощью CSS.
При использовании панели для мобильной навигации вы хотите, чтобы панель автоматически закрывалась при нажатии ссылки меню на панели, для этого добавьте onClick={togglePanel}
к элементу панели.
const Panel = ({ children, toggle, event }) => { return ( <section className={`panel ${toggle}`} onClick={event} > {children} </section> ); }; .panel { padding: 15px 15px; display: flex; flex-flow: column; position: fixed; top: 0; bottom: 0; height: 100vh; overflow: hidden; z-index: 999; background-color: #334050; visibility: visibility; -moz-transition: right 500ms ease !important; -ms-transition: right 500ms ease !important; -webkit-transition: right 500ms ease !important; -o-transition: right 500ms ease !important; transition: right 500ms ease !important; box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13); } .closed { right: -100vw; z-index: 9999; } .open { right: 0; z-index: 9999; }
Чтобы использовать панель, мы управляем некоторым простым состоянием в app.js или любом родительском компоненте, в котором мы его используем. Это установит состояние переключения. Изначально он закрыт, поэтому мы присваиваем ему логическое значение false
. Затем мы используем простой обработчик событий для запуска события переключения, которое переключает класс элемента панели.
const App = () => { const [panel, setPanel] = useState(false); const togglePanel = () => setPanel(!panel); let toggle = panel ? `open` : `close`; const openPanel = () => { togglePanel(); }; return ( <Panel toggle={toggle} event={togglePanel}> {/* content */} </Panel> ) }
И это так просто.