AI Magic 3DDocsBanner
Fügen Sie Ihrer Website ein Banner hinzu
Be careful, Fumadocs v99 has released
Using the
rainbow variantBe careful, this banner can be closed
Verwendung
Platzieren Sie das Element oben in Ihrem Root-Layout. Sie können es zum Anzeigen von Ankündigungen verwenden.
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>
);
}Variante
Ändern Sie die Standardvariante.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner variant="rainbow">Hello World</Banner>;Layout ändern
Standardmäßig verwendet das Banner ein style-Tag, um Fumadocs-Layouts zu ändern (z. B. die Höhe der Seitenleiste zu reduzieren).
Sie können es deaktivieren mit:
import { Banner } from 'fumadocs-ui/components/banner';
<Banner changeLayout={false}>Hello World</Banner>;Schließen
Um Benutzern das Schließen des Banners zu ermöglichen, geben Sie dem Banner eine ID.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner id="hello-world">Hello World</Banner>;Der Zustand wird automatisch beibehalten.