AI 매직 3DDocs기치
사이트에 배너 추가
Be careful, Fumadocs v99 has released
Using the
rainbow variantBe 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>;상태는 자동으로 유지됩니다.