nextjs toploader
v3.7.15
使用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 } /> ;
</ >
) ;
}有关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 |
由于其代码贡献者的贡献，该项目成为可能。
与您的组织一起支持这个项目。您的徽标将在此处显示您网站的链接。您可以从下面的开放集体或同等方法上支持此项目
UPI ID：THESGJ@UPI（国际UPI ID）
