nextjs toploader
v3.7.15
NPM 사용 :
npm install nextjs-toploader원사 사용 :
yarn add nextjs-toploader가져 오기 :
import NextTopLoader from 'nextjs-toploader' ;app 폴더 구조에 대한 app/layout.js 사용한 사용 rendering의 경우 <body></body> 의 rootlayout return() 내부에 <NextTopLoader /> 추가하십시오 RootLayout() :
import NextTopLoader from 'nextjs-toploader' ;
export default function RootLayout ( { children } ) {
return (
< html lang = "en" >
< body >
< NextTopLoader />
{ children }
</ body >
</ html >
) ;
}pages 폴더 구조의 pages/_app.js 와 함께 사용합니다 렌더링하려면 MyApp() 에서 return() 에 <PagesTopLoader /> 를 추가합니다 (권장) :
import { PagesTopLoader } from 'nextjs-toploader/pages' ;
export default function MyApp ( { Component , pageProps } ) {
return (
< >
< PagesTopLoader />
< Component { ... pageProps } /> ;
</ >
) ;
} pages 라우터에서 <NextTopLoader /> 사용할 수 있지만 nextjs-toploader 버전 2.6.12에서 < useRouter <PagesTopLoader /> 사용하는 것이 좋습니다.
useRouter Hook와의 호환성app 폴더 구조 용 app/layout.js 사용한 useRouter Hook 사용 useRouter hook (앱 라우터)를 사용할 때 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 폴더 구조에 대한 pages/_app.js 사용한 useRouter Hook 사용법 MyApp() 에서 < useRouter <PagesTopLoader /> return() 에 추가 할 때 Toploader를 트리거하려면 :
import { PagesTopLoader } from 'nextjs-toploader/pages' ;
export default function MyApp ( { Component , pageProps } ) {
return (
< >
< PagesTopLoader />
< Component { ... pageProps } /> ;
</ >
) ;
} 렌더링하려면 app.js의 App() 의 구성 요소 내부에 <NextTopLoader /> return() 에 추가하십시오.
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 : 탑 로더의 초기 위치를 백분율로 변경하려면 : 0.08 = 8% .crawlSpeed : ms 의 증가 지연 속도.speed : ms 의 Toploader의 애니메이션 속도easing : 완화 (CSS 완화 문자열)를 사용한 애니메이션 설정.height : px 에서 탑 로더 높이.crawl : 탑 로더의 자동 증분 동작.showSpinner : Spinner를 보여주는 것입니다.shadow : 탑 로더의 부드러운 그림자. (비활성화하기 위해 false 로 설정)template : Toploader에 대한 사용자 정의 HTML 속성을 포함합니다.zIndex : Toploader의 Zindex를 정의합니다.showAtBottom : 맨 아래에 탑 로더를 보여줍니다. (모바일 장치에서의 가시성을 보장하기 위해 탑 로더의 높이를 늘리십시오) NextTopLoaderProps (소품이 탑 로더로 전달됨)| 이름 | 유형 | 기본값 |
|---|---|---|
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 (International Upi ID)
