SuperSlide.js

Superslide.js

Menu geser yang ringan dan dapat dikonfigurasi untuk PWA Anda berikutnya dengan janji. Hanya 2K Gzipped!

Perpustakaan ini bertujuan untuk menyediakan menu geser yang sangat dapat dikonfigurasi dan siap digunakan untuk aplikasi web Anda berikutnya, sambil memberikan kinerja animasi seperti asli. Itu diciptakan oleh Teknologi Osrec saat mengembangkan BX, faktur kami, pelacakan waktu dan manajemen proyek PWA.

Instalasi

 npm install superslide.js

Penggunaan

Referensi perpustakaan dalam tag skrip

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

Tambahkan markup HTML dasar

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

Tambahkan gaya (jadi kita bisa melihat apa yang terjadi!)

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

Inisialisasi menu

 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 ( ) ;

Coba demo di sini

Animasi

Versi standar memiliki 4 opsi animasi yang tersedia:

Slideleft	Slideright	SlideBottom	slidetop

Versi Pro berisi lebih banyak animasi menu (lihat @ https://osrec.co.uk/products/superslidejs)

Parameter

• animation ( string ): Salah satu animasi di Perpustakaan Animasi ( slideLeft , slideRight , slideTop , slideBottom ).

• duration ( integer ): Durasi dalam detik untuk animasi slide

• allowDrag ( boolean ): Biarkan menu diseret ke posisi terbuka atau tertutup melalui acara sentuh.

• slideContent ( boolean ): Geser konten bersama dengan menu

• allowContentInteraction ( boolean ): Biarkan konten diklik atau digulir saat menu terbuka

• closeOnBlur ( boolean ): Tutup menu saat pengguna mengklik atau mengetuk di mana saja di luar menu

• width ( string ): Lebar menu (untuk menu yang duduk di sepanjang tepi vertikal). Contoh: '60vw' atau '300px' atau '80%'

• height ( string ): Ketinggian menu (untuk menu yang duduk di sepanjang tepi horizontal). Contoh: '50vh' atau '300px' atau '80%'

• dragThreshold ( integer ): Jumlah piksel dari tepi dari mana pengguna dapat mulai menyeret; Contoh: 70. Gunakan dengan opsi Alluprag.

• openThreshold ( integer ): Ketika menu berada di posisi terbuka, jumlah piksel yang harus diseret sebelum dibuka secara otomatis; Contoh: 30. Gunakan dengan opsi Alluprag.

• closeThreshold ( integer ): Ketika menu berada di posisi tertutup, jumlah piksel yang harus diseret sebelum ditutup secara otomatis; Contoh: 20. Gunakan dengan opsi Alluprag.

• beforeOpen ( callback ): dieksekusi sebelum menu mulai terbuka

• onOpen ( callback ): Dieksekusi langsung setelah menu dibuka

• beforeClose ( callback ): Dieksekusi sebelum menu mulai ditutup

• onClose ( callback ): Dieksekusi segera setelah menu ditutup

Metode

• OSREC.superslide.open() Buka menu. Mengembalikan janji yang diselesaikan setelah menu terbuka (yaitu animasi selesai).

• OSREC.superslide.close() Tutup menu. Mengembalikan janji yang diselesaikan setelah menu ditutup (yaitu animasi selesai).

• OSREC.superslide.toggle() menaikkan menu. Mengembalikan janji yang diselesaikan setelah menu telah diaktifkan (yaitu animasi selesai).

• OSREC.superslide.isOpen() true jika menu terbuka, false jika ditutup. Keadaan terakhir jika mid-drag. Mengembalikan boolean.

• OSREC.superslide.ready() Periksa apakah menu sepenuhnya diinisialisasi. Mengembalikan janji yang diselesaikan ketika diinisialisasi sepenuhnya.

• OSREC.superslide.destroy() Hancurkan menu. Ini akan menutup menu jika terbuka sebelum menghancurkan. Mengembalikan nol

Kredit

Dibuat oleh tim BX di Osrec Technologies.

Perpustakaan dikembangkan sebagai bagian dari aplikasi manajemen bisnis dan proyek kami yang disebut BX (Anda dapat memeriksanya di sini).