nextjs toploader下載nextjs toploader源代碼下載

nextjs toploader

Ai源碼

v3.7.15

下載

下一個JS TopLoader

next.js頂部加載條組件使用nprogress製造，可與next.js 14一起使用。

安裝

使用NPM：

npm install nextjs-toploader

使用紗線：

yarn add nextjs-toploader

用法

使用：

 import NextTopLoader from 'nextjs-toploader' ;

使用`app`文件夾結構的`app/layout.js`使用

用於渲染<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`文件夾結構

有關在MyApp()中的return()中添加<PagesTopLoader /> （建議）：

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

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

您也nextjs-toploader在pages路由器useRouter使用<NextTopLoader /> <PagesTopLoader />

與`useRouter`掛鉤的兼容性

使用`app/layout.js`的`useRouter`掛鉤使用`app`文件夾結構

對於使用useRouter Hook（App Router）時，用於觸發Toploader：

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

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

然後只需在代碼中使用它：

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

使用`pages/_app.js` `useRouter`圈掛鉤使用`pages`文件夾結構

對於在return() MyApp()中使用useRouter add <PagesTopLoader />時，請觸發toploader：

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

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

用反應，Vite React或任何其他基於React的框架使用

有關app（）中的App()中的組件中的組件中的return()請添加<NextTopLoader /> 。

 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 ： ms中的Toploader的動畫速度
easing ：使用寬鬆的動畫設置（A CSS寬鬆字符串）。
height ： px中的頂載器的高度。
crawl ：TopLoader的自動增量行為。
showSpinner ：是否顯示旋轉器。
shadow ：頂部負載器的光滑陰影。（設置為false以禁用它）
template ：包含TopLoader的自定義HTML屬性。
zIndex ：為TopLoader定義Zindex。
showAtBottom ：在底部顯示Toploader。（提高頂級裝載器的高度，以確保其在移動設備上的可見性）

`NextTopLoaderProps` （Props傳遞給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`