Unduh nextjs toploader - Unduh Kode Sumber nextjs toploader

nextjs toploader

Kode Sumber AI

v3.7.15

Unduh

Toploader JS berikutnya

Komponen batang pemuatan atas selanjutnya.

Memasang

Menggunakan NPM:

npm install nextjs-toploader

Menggunakan benang:

yarn add nextjs-toploader

Penggunaan

Impor menggunakan:

 import NextTopLoader from 'nextjs-toploader' ;

Penggunaan dengan `app/layout.js` untuk struktur folder `app`

Untuk rendering tambahkan <NextTopLoader /> ke return() di dalam <body></body> dari RootLayout() :

 import NextTopLoader from 'nextjs-toploader' ;

export default function RootLayout ( { children } ) {
  return (
    < html lang = "en" >
      < body >
        < NextTopLoader />
        { children }
      </ body >
    </ html >
  ) ;
}

Penggunaan dengan `pages/_app.js` untuk `pages` folder struktur

Untuk rendering tambahkan <PagesTopLoader /> ke return() di MyApp() (disarankan):

 import { PagesTopLoader } from 'nextjs-toploader/pages' ;

export default function MyApp ( { Component , pageProps } ) {
  return (
    < >
      < PagesTopLoader />
      < Component { ... pageProps } /> ;
    </ >
  ) ;
}

Anda juga dapat menggunakan <NextTopLoader /> di router pages , tetapi disarankan untuk menggunakan <PagesTopLoader /> untuk dukungan pengait useRouter dari nextjs-toploader versi 2.6.12 dan seterusnya

Kompatibilitas dengan hook `useRouter`

Penggunaan Hook `useRouter` dengan `app/layout.js` untuk Struktur Folder `app`

Untuk memicu toploader saat menggunakan hook useRouter (router aplikasi):

 // Import the useRouter hook from nextjs-toploader to trigger the TopLoader

import { useRouter } from 'nextjs-toploader/app' ;

Kemudian cukup gunakan dalam kode Anda misalnya:

 const router = useRouter ( ) ;
router . push ( '/some-page' ) ;

Penggunaan Hook `useRouter` dengan `pages/_app.js` untuk Struktur Folder `pages`

Untuk memicu toploader saat menggunakan useRouter tambahkan <PagesTopLoader /> ke Anda return() di MyApp() :

 import { PagesTopLoader } from 'nextjs-toploader/pages' ;

export default function MyApp ( { Component , pageProps } ) {
  return (
    < >
      < PagesTopLoader />
      < Component { ... pageProps } /> ;
    </ >
  ) ;
}

Penggunaan dengan React, Vite React atau kerangka kerja berbasis reaksi lainnya

Untuk rendering tambahkan <NextTopLoader /> ke return() di dalam komponen di App() di app.js Anda:

 import NextTopLoader from 'nextjs-toploader' ;
const App = ( ) => {
  return (
    < div >
      < Router >
        < NextTopLoader />
        < Routes > { /* Your Routes Here */ } </ Routes >
      </ Router >
    </ div >
  ) ;
} ;

export default App ;

Konfigurasi default

Jika tidak ada alat peraga yang diteruskan ke <NextTopLoader /> , di bawah ini adalah konfigurasi default yang diterapkan.

 < NextTopLoader
  color = "#2299DD"
  initialPosition = { 0.08 }
  crawlSpeed = { 200 }
  height = { 3 }
  crawl = { true }
  showSpinner = { true }
  easing = "ease"
  speed = { 200 }
  shadow = "0 0 10px #2299DD,0 0 5px #2299DD"
  template = '<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  zIndex = { 1600 }
  showAtBottom = { false }
/>

color : Untuk mengubah warna default toploader.
initialPosition : Untuk mengubah posisi awal untuk toploader dalam persentase ,: 0.08 = 8% .
crawlSpeed : Kecepatan penundaan kenaikan di ms .
speed : Kecepatan animasi untuk toploader di ms
easing : Pengaturan Animasi Menggunakan Easing (string pelonggaran CSS).
height : Tinggi toploader di px .
crawl : Perilaku bertambah otomatis untuk toploader.
showSpinner : Untuk menunjukkan pemintal atau tidak.
shadow : Bayangan yang halus untuk toploader. (diatur ke false untuk menonaktifkannya)
template : Untuk memasukkan atribut HTML khusus untuk toploader.
zIndex : Menentukan Zindex untuk Toploader.
showAtBottom : Untuk menampilkan toploader di bawah. (Tingkatkan ketinggian untuk toploader untuk memastikan visibilitas di perangkat seluler)

`NextTopLoaderProps` (alat peraga diteruskan ke toploader)

Nama	Jenis	Nilai default
`color`	`string`	`"#2299DD"`
`initialPosition`	`number`	`0.08`
`crawlSpeed`	`number`	`200`
`height`	`number`	`3`
`crawl`	`boolean`	`true`
`showSpinner`	`boolean`	`true`
`easing`	`string`	`"ease"`
`speed`	`number`	`200`
`shadow`	`string \| false`	`"0 0 10px #2299DD,0 0 5px #2299DD"`
`template`	`string`	`"<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>"`
`zIndex`	`number`	`1600`
`showAtBottom`	`boolean`	`false`
`showForHashAnchor`	`boolean`	`true`

Kontributor

Kontributor Kode

Proyek ini dimungkinkan berkat kontribusi kontributor kodenya.

Kontributor Keuangan

Dukung proyek ini dengan organisasi Anda. Logo Anda akan muncul di sini dengan tautan ke situs web Anda. Anda dapat mendukung proyek ini dengan metode Open Collective atau yang setara dari di bawah ini

ID UPI: Thesgj@UPI (ID UPI Internasional)

Memperluas

Informasi Tambahan