nextjs toploader Download - nextjs toploader Source Code Download

nextjs toploader

كود الذكاء الاصطناعي

v3.7.15

تنزيل

التالي JS Toploader

مكون شريط التحميل العلوي Next.js مصنوع باستخدام nprogress ، يعمل مع Next.js 14 و React.

ثَبَّتَ

باستخدام 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 من إصدار nextjs-toploader 2.6.12 فصاعدًا

التوافق مع خطاف `useRouter`

`useRouter` hook use with `app/layout.js` لهيكل مجلد `app`

لتشغيل Toploader عند استخدام خطاف 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 : السلوك المتزايد التلقائي لمحمل العليا.
showSpinner : لإظهار الدوار أم لا.
shadow : ظل ناعم للمحمل العلوي. (تم تعيينه على false لتعطيله)
template : لتضمين سمات HTML مخصصة لـ Toploader.
zIndex : يحدد Zindex لـ Toploader.
showAtBottom : لإظهار 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`