X (Twitter)

Be careful, Fumadocs v99 has released

Using the rainbow variant

Be careful, this banner can be closed

使用状況

この要素をルートレイアウトの最上部に配置すると、お知らせの表示に使用できます。

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): React.ReactElement {
  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>;

レイアウトの変更

デフォルトでは、バナーは 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>;

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

Be careful, Fumadocs v99 has released

Using the rainbow variant

Be careful, this banner can be closed

使用状況

この要素をルートレイアウトの最上部に配置すると、お知らせの表示に使用できます。

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): React.ReactElement {
  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>;

レイアウトの変更

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

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

バナー

使用状況

バリアント

レイアウトの変更

閉じる

目次

バナー

使用状況

バリアント

レイアウトの変更

閉じる

目次