橫幅 | Fumadocs

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

狀態會自動保存。

橫幅

使用方式複製錨點連結

變體複製錨點連結

變更版面配置複製錨點連結

關閉複製錨點連結

本頁目錄

使用方式

變體

變更版面配置

關閉