nextjs toploader Download - nextjs toploader Source Source Download

nextjs toploader

โค้ดแหล่งที่มา AI

v3.7.15

ดาวน์โหลด

ถัดไป js toploader

ส่วนประกอบแถบการโหลด TOP TOP NEXT.JS ที่ทำโดยใช้ nProgress ทำงานร่วมกับ next.js 14 และตอบสนอง

ติดตั้ง

ใช้ NPM:

npm install nextjs-toploader

ใช้เส้นด้าย:

yarn add nextjs-toploader

การใช้งาน

นำเข้าโดยใช้:

 import NextTopLoader from 'nextjs-toploader' ;

การใช้งานด้วย `app/layout.js` สำหรับโครงสร้างโฟลเดอร์ `app`

สำหรับการแสดงผลเพิ่ม <NextTopLoader /> ไปยัง return() ของคุณภายใน <body></body> ของ RootLayout() :

 import NextTopLoader from 'nextjs-toploader' ;

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

การใช้งานกับ `pages/_app.js` สำหรับโครงสร้างหน้าโฟลเดอร์ `pages`

สำหรับการแสดงผลเพิ่ม <PagesTopLoader /> ไปยัง return() ของคุณใน MyApp() (แนะนำ):

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

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

นอกจากนี้คุณยังสามารถใช้ <NextTopLoader /> ในเราเตอร์ pages แต่ขอแนะนำให้ใช้ <PagesTopLoader /> สำหรับการสนับสนุน useRouter hook จาก nextjs-toploader เวอร์ชัน 2.6.12 เป็นต้นไป

ความเข้ากันได้กับ hook `useRouter`

`useRouter` เบ็ดการใช้งานด้วย `app/layout.js` สำหรับโครงสร้างโฟลเดอร์ `app`

สำหรับทริกเกอร์ toploader เมื่อใช้ Hook useRouter (เราเตอร์แอพ):

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

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

จากนั้นใช้ในรหัสของคุณเช่น:

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

`useRouter` เบ็ดการใช้งานด้วย `pages/_app.js` สำหรับโครงสร้างโฟลเดอร์ `pages`

สำหรับทริกเกอร์ toploader เมื่อใช้ useRouter เพิ่ม <PagesTopLoader /> ไปยัง return() ของคุณใน MyApp() :

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

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

การใช้งานกับ React, Vite React หรือกรอบการทำงานอื่น ๆ

สำหรับการแสดงผลเพิ่ม <NextTopLoader /> ไปยัง return() ของคุณภายในส่วนประกอบใน App() ใน app.js ของคุณ:

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

export default App ;

การกำหนดค่าเริ่มต้น

หากไม่มีอุปกรณ์ประกอบฉากถูกส่งผ่านไปยัง <NextTopLoader /> ด้านล่างคือการกำหนดค่าเริ่มต้นที่ใช้

 < 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 : เพื่อเปลี่ยนสีเริ่มต้นของ toploader
initialPosition : หากต้องการเปลี่ยนตำแหน่งเริ่มต้นสำหรับ toploader เป็นเปอร์เซ็นต์,: 0.08 = 8%
crawlSpeed : ความเร็วการหน่วงเวลาเพิ่มขึ้นใน ms
speed : ความเร็วภาพเคลื่อนไหวสำหรับ toploader ใน ms
easing : การตั้งค่าแอนิเมชั่นโดยใช้การผ่อนคลาย (สตริงการผ่อนคลาย CSS)
height : ความสูงของ toploader ใน px
crawl : พฤติกรรมการเพิ่มขึ้นอัตโนมัติสำหรับ toploader
showSpinner : เพื่อแสดงสปินเนอร์หรือไม่
shadow : เงาที่ราบรื่นสำหรับ toploader (ตั้งค่าเป็น false เพื่อปิดการใช้งาน)
template : เพื่อรวมแอตทริบิวต์ HTML ที่กำหนดเองสำหรับ toploader
zIndex : กำหนด ZINDEX สำหรับ Toploader
showAtBottom : เพื่อแสดง toploader ที่ด้านล่าง (เพิ่มความสูงสำหรับ Toploader เพื่อให้แน่ใจว่าการมองเห็นของอุปกรณ์มือถือ)

`NextTopLoaderProps` (อุปกรณ์ประกอบฉากส่งผ่านไปยัง Toploader)

ชื่อ	พิมพ์	ค่าเริ่มต้น
`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`

ผู้มีส่วนร่วม

ผู้สนับสนุนรหัส

โครงการนี้เกิดขึ้นได้ด้วยการมีส่วนร่วมของผู้สนับสนุนรหัส

ผู้สนับสนุนทางการเงิน

สนับสนุนโครงการนี้กับองค์กรของคุณ โลโก้ของคุณจะปรากฏขึ้นที่นี่พร้อมลิงค์ไปยังเว็บไซต์ของคุณ คุณสามารถสนับสนุนโครงการนี้ด้วยวิธี Open Collective หรือเทียบเท่าจากด้านล่าง

upi id: thesgj@upi (International UPI ID)

ขยาย

ข้อมูลเพิ่มเติม