Startseite>Programmierbezogen>AI-Quellcode
Herunterladen

Nächster JS -Toploader

  • Eine nächste.

Installieren

Verwenden von NPM: 

npm install nextjs-toploader

mit Garn: 

yarn add nextjs-toploader

Verwendung

Import mit: 

 import NextTopLoader from 'nextjs-toploader' ;

Verwendung mit app/layout.js für app -Ordnerstruktur

Zum Rendern add <NextTopLoader /> zu Ihrem return() im <body></body> von RootLayout() : 

 import NextTopLoader from 'nextjs-toploader' ;

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

Verwendung mit pages/_app.js für pages

Zum Rendern add <PagesTopLoader /> zu Ihrem return() in MyApp() (empfohlen): 

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

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

Sie können auch <NextTopLoader /> im pages verwenden. Es wird jedoch empfohlen, <PagesTopLoader /> für useRouter -Hook-Support von nextjs-toploader Version 2.6.12 zu verwenden

Kompatibilität mit useRouter -Hook

useRouter -Haken -Verwendung mit app/layout.js für app -Ordnerstruktur

Zum Auslösen von Toploader bei Verwendung useRouter -Hooks (App -Router): 

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

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

Verwenden Sie es dann einfach in Ihrem Code, zum Beispiel: 

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

useRouter -Haken -Verwendung mit pages/_app.js für pages

Zum Auslösen von Toploader bei Verwendung useRouter add <PagesTopLoader /> zu Ihrem return() in MyApp() : 

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

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

Verwendung mit React, Vite React oder einem anderen React -basierten Gerüst

Für das Rendern von add <NextTopLoader /> zu Ihrem return() in der Komponente in App() in Ihrem App.js: return (): 

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

export default App ;

Standardkonfiguration

Wenn keine Requisiten an <NextTopLoader /> übergeben werden, finden Sie unten die angewendete Standardkonfiguration. 

 < 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 : Um die Standardfarbe des Toploaders zu ändern.
  • initialPosition : Ändern der Anfangsposition für den Toploader in Prozent: 0.08 = 8% .
  • crawlSpeed : Inkrementverzögerungsgeschwindigkeit in ms .
  • speed : Animationsgeschwindigkeit für den Toploader in ms
  • easing : Animationseinstellungen mit Lockern (eine CSS -Lockering -Zeichenfolge).
  • height : Höhe des Toploaders in px .
  • crawl : Automatisches Inkrementierungsverhalten für den Toploader.
  • showSpinner : Spinner zeigen oder nicht.
  • shadow : Ein sanfter Schatten für den Toploader. (auf false festgelegt, um es zu deaktivieren)
  • template : Um benutzerdefinierte HTML -Attribute für den Toploader einzuschließen.
  • zIndex : Definiert Zindex für den Toploader.
  • showAtBottom : Um den Toploader unten zu zeigen. (Erhöhen Sie die Höhe für den Toploader, um sicherzustellen, dass die Sichtbarkeit auf den mobilen Geräten die Sichtbarkeit ist.)

NextTopLoaderProps (Requisiten, die an den Toploader übergeben wurden)

Name Typ Standardwert
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

Mitwirkende

Code -Mitwirkende

Dieses Projekt wurde dank der Beiträge seiner Code -Mitwirkenden ermöglicht.

Finanzielle Mitwirkende

Unterstützen Sie dieses Projekt mit Ihrer Organisation. Ihr Logo wird hier mit einem Link zu Ihrer Website angezeigt. Sie können dieses Projekt von unten auf offene kollektive oder äquivalente Methoden unterstützen

UPI ID: thesgj@upi (internationale UPI -ID)

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle