下一个.js 进度栏

说明 这是叉子 下一个js- 进度栏 以 议会21。它在进度栏中增加了一个可选的解跳来防止它在页面快速加载时闪烁.

使用简单的 Next.js 进度栏组件 进展。 。 。 .

使用量

安装软件包后导入 NextProgress 在你身边 pages/_app.tsx 文件并添加 <NextProgress /> 切换函数在 App数字 :

import NextProgress from '@approximant/next-progress';

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

默认配置

如果没有道具传递给 <NextProgress />,则应用了默认配置.

// Default config
<NextProgress 
  debounce={300}
  color="#29D"
  startPosition={0.3}
  stopDelayMs={200}
  height={3}
  showOnShallow={true}  
  />

• debounce: 暂停时间 ms。如果页面加载时间少于本次,则不会显示进度栏.
• color: 更改进度栏的默认颜色。 您还可以使用 rgb(,,) 或者说 rgba(,,,)。 。 。 .
• startPosition:设置默认起始位置: 0.3 = 30%。 。 。 .
• stopDelayMs: 延迟停止进度栏的时间 ms。 。 。 .
• height: 进度栏的高度 px。 。 。 .
• showOnShallow:如果使用浅路由,您可以选择是否要显示进度栏 。 它需要一个布尔。 了解更多浅道 在下一个.js 文档中。 。 。 .

高级配置

添加非单曲

我们用内部的cs在这个包。 如果您使用 Csp , 您可以在 <style> 通过提供标记 nonce 向 <NextProgress /> 组件.

<NextProgress nonce="my-nonce" />

自定义 CSS

你用得着 transformCSS 通过自定义 cs. 说明: 你一定要回来 JSX.Element 从功能.

NextProgress<
  transformCSS={(css) => {
    // css is the default css string. You can modify it and return it or return your own css.
    return <style>{css}</style>;
  }}
/>

其他配置

你用得着 其他配置 通过在 options 道具来.

<NextProgress options={{ easing: 'ease', speed: 500 }} />