橫幅 | Formion — 企業組織與營運的結構化引擎

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

狀態將自動保持。

橫幅

使用方法

變體

更改佈局

關閉

目錄

橫幅

使用方法

變體

更改佈局

關閉

目錄