Главная страница>Связанные с программированием>AI Исходный код
Скачать

Далее JS Toploader

  • Следующая топовая нагрузочная планка, сделанная с использованием 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> of 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 krock от nextjs-toploader версии 2.6.12

Совместимость с крючком useRouter

Использование useRouter Hook с app/layout.js для структуры папок app

Для запуска TopLoader при использовании useRouter Hook (маршрутизатор приложения): 

 // 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

Для запуска топ -загрузчика при использовании 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 : чтобы изменить цвет по умолчанию топ -загрузчика.
  • initialPosition : чтобы изменить начальную позицию для топ -загрузчика в процентах: 0.08 = 8% .
  • crawlSpeed : скорость задержки приращения в ms .
  • speed : скорость анимации для топ -загрузчика в ms
  • easing : настройки анимации с использованием Ealeing (строка CSS Ealeing).
  • height : высота топ -загрузчика в px .
  • crawl : Поведение автоматического увеличения для топ -загрузчика.
  • showSpinner : Показать Spinner или нет.
  • 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

Участники

Кодовые участники

Этот проект стал возможным благодаря вкладу его участников кода.

Финансовые участники

Поддержите этот проект вашей организацией. Ваш логотип будет отображаться здесь со ссылкой на ваш сайт. Вы можете поддержать этот проект на открытом коллективном или эквивалентном методе из ниже

UPI ID: thesgj@Upi (International UPI ID)

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все