バナー

Be careful, Fumadocs v99 has released

Using the rainbow variant

customize the rainbow variant

Install to your codebase

Easier customization & control.

npx @fumadocs/cli@latest add banner

使い方

この要素をルートレイアウトの最上部に配置します。お知らせの表示などに利用できます。

import { Banner } from 'fumadocs-ui/components/banner';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Banner>Hello World</Banner>
        {children}
      </body>
    </html>
  );
}

バリアント

デフォルトのバリアントを変更します。

import { Banner } from 'fumadocs-ui/components/banner';

<Banner variant="rainbow">Hello World</Banner>;

// 色のカスタマイズ
<Banner
  variant="rainbow"
  rainbowColors={[
    'rgba(255,100,0, 0.5)',
    'rgba(255,100,0, 0.5)',
    'transparent',
    'rgba(255,100,0, 0.5)',
    'transparent',
    'rgba(255,100,0, 0.5)',
    'transparent',
  ]}
>
  Hello World
</Banner>;

レイアウトの変更

デフォルトでは、バナーは style タグを使って Fumadocs のレイアウトを調整します(例: サイドバーの高さを縮める)。この動作は次のように無効化できます。

import { Banner } from 'fumadocs-ui/components/banner';

<Banner changeLayout={false}>Hello World</Banner>;

閉じる

ユーザーがバナーを閉じられるようにするには、バナーに ID を指定します。

import { Banner } from 'fumadocs-ui/components/banner';

<Banner id="hello-world">Hello World</Banner>;

状態は自動的に永続化されます。

使い方アンカーリンクをコピー

バリアントアンカーリンクをコピー

レイアウトの変更アンカーリンクをコピー

閉じるアンカーリンクをコピー

このページの内容

使い方

バリアント

レイアウトの変更

閉じる