Как построить навигационное меню в стиле лав-лампы с помощью React

Меню в стиле Lava-Lamp содержит индикатор, который перемещается в выбранную позицию, когда мы выбираем опцию.

Мы можем видеть этот тип навигации, (например) в интерфейсе AppleTV.

Все еще не ясно? Посмотрите на это демо:
https://react-llamp-menu-demo.netlify.app/

Как его создать?
1.-Установите зависимость

2.-Импортировать

3.-Добавьте структуру меню следующим образом

<LavalampMenu>
  <ul>
    <li><button onClick={()=>console.log('option 1')}>First option</button></li>
    <li><button onClick={()=>console.log('option 2')}>Second option</button></li>
    <li><button onClick={()=>console.log('option 3')}>Third option</button></li>
  </ul>
</LavalampMenu>
Вход в полноэкранный режим Выход из полноэкранного режима

4.-Настроить с помощью CSS


Проверьте проект на gitHub
https://github.com/jlizanab/react-llamp-menu

Посмотрите демонстрацию на CodeSandbox
https://codesandbox.io/s/react-llamp-menu-luq9ht

Оцените статью
devanswers.ru
Добавить комментарий