横幅 | MkSaaS - 最好的 AI SaaS 模板

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

更改布局

默认情况下，横幅使用 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>;

状态将自动保持。

横幅

使用方法

变体

更改布局

关闭

目录

横幅

使用方法

变体

更改布局

关闭

目录