SuperSlide.js

SuperSlide.js

Легкое, настраиваемое скользящее меню для вашего следующего PWA с обещаниями. Только 2K GZIPD!

Эта библиотека направлена ​​на то, чтобы обеспечить очень настраиваемое, готовое к использованию скользящее меню для вашего следующего веб-приложения, при этом обеспечивая производительность анимации, подобную нативным. Он был создан технологиями OSREC при разработке BX, нашего выставления счетов, отслеживания времени и управления проектами PWA.

Установка

 npm install superslide.js

Использование

Ссылка на библиотеку в теге сценария

 < script src =' superslide.js ' > </ script >

Добавить базовую HTML.

 < body >
  < div id =' content ' > Content </ div >
  < div id =' menu ' > Menu </ div >
</ body >

Добавьте стили (чтобы мы могли видеть, что происходит!)

 < style >
  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }
</ style >

Инициализировать меню

 var myMenu = new OSREC . superslide
( {
    slider : document . getElementById ( 'menu' ) ,
    content : document . getElementById ( 'content' ) ,
    animation : 'slideLeft'
} ) ;

// Promise resolves once menu is open
var openPromise = myMenu . open ( ) ;

Попробуйте демо здесь

Анимация

Стандартная версия имеет 4 варианта анимации:

Slideleft	Slideright	Slidebottom	Slidetop

Pro Version содержит еще много анимаций меню (проверьте это @ https://osrec.co.uk/products/superslidejs)

Параметры

• animation ( string ): любая из анимации в библиотеке анимации ( slideLeft , slideRight , slideTop , slideBottom ).

• duration ( integer ): продолжительность за считанные секунды для анимации слайдов

• allowDrag ( boolean ): позвольте перетаскиваться меню в открытое или закрытое положение через сенсорные события.

• slideContent ( boolean ): Сдвиньте содержание вместе с меню

• allowContentInteraction ( boolean ): Разрешить нажимать или прокручивать контент, пока меню открыто

• closeOnBlur ( boolean ): Закройте меню, когда пользователь нажимает или нажимает в любом месте за пределами меню

• width ( string ): ширина меню (для меню, которые сидят вдоль вертикального края). Примеры: '60VW' или '300px' или '80%'

• height ( string ): высота меню (для меню, которые сидят вдоль горизонтального края). Примеры: '50vh' или '300px' или '80%'

• dragThreshold ( integer ): количество пикселей от края, откуда пользователь может начать перетаскиваться; Пример: 70. Используйте с опцией AlluctDrag.

• openThreshold ( integer ): Когда меню находится в открытом положении, количество пикселей его необходимо перетаскивать, прежде чем оно откроется автоматически; Пример: 30. Использовать с опцией AlluctDRAG.

• closeThreshold ( integer ): когда меню находится в закрытом положении, количество пикселей его необходимо перетаскивать, прежде чем оно закрывается автоматически; Пример: 20. Использовать с опцией AlluctDrag.

• beforeOpen ( callback ): выполнено до того, как меню начнет открываться

• onOpen ( callback ): выполнено сразу после открытия меню

• beforeClose ( callback ): выполнено до того, как меню начнет закрываться

• onClose ( callback ): выполнено, как только меню закрылось

Методы

• OSREC.superslide.open() Откройте меню. Возвращает обещание, которое разрешается, как только меню открывается (т.е. анимация завершается).

• OSREC.superslide.close() закрыть меню. Возвращает обещание, которое разрешается, как только меню закрывается (т.е. анимация завершается).

• OSREC.superslide.toggle() переключает меню. Возвращает обещание, которое разрешается, как только меню будет переключено (т.е. анимация завершается).

• OSREC.superslide.isOpen() true, если меню открыто, ложно, если закрыто. Последнее состояние, если средний драг. Возвращает логическое.

• OSREC.superslide.ready() Проверьте, полностью ли инициализировано меню. Возвращает обещание, которое разрешается при полной инициализировании.

• OSREC.superslide.destroy() уничтожить меню. Это закроет меню, если оно будет открыто, прежде чем уничтожить. Возвращает ноль

Кредиты

Создан командой BX в Osrec Technologies.

Библиотека была разработана как часть нашего приложения управления бизнесом и проектами под названием BX (вы можете проверить это здесь).