横幅
在你的网站上添加横幅
Be careful, Fumadocs v99 has released
Using the
rainbow variantcustomise the
rainbow variantInstall to your codebase
Easier customisation & control.
使用
🌐 Usage
将该元素放在根布局的顶部，可以用于显示公告。
🌐 Put the element at the top of your root layout, you can use it for displaying announcements.
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>
);
}变体
🌐 Variant
更改默认变体。
🌐 Change the default variant.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner variant="rainbow">Hello World</Banner>;
// customise colors
<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>;更改布局
🌐 Change Layout
默认情况下，横幅使用 style 标签来修改 Fumadocs 的布局（例如，减少侧边栏的高度）。
你可以通过以下方式禁用它：
🌐 By default, the banner uses a style tag to modify Fumadocs layouts (e.g. reduce the sidebar height).
You can disable it with:
import { Banner } from 'fumadocs-ui/components/banner';
<Banner changeLayout={false}>Hello World</Banner>;关闭
🌐 Close
为了允许用户关闭横幅，请为横幅设置一个ID。
🌐 To allow users to close the banner, give the banner an ID.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner id="hello-world">Hello World</Banner>;状态将被自动保存。
🌐 The state will be automatically persisted.
Last updated on