AI Magic 3DDocsBannière
Ajoutez une bannière à votre site
Be careful, Fumadocs v99 has released
Using the
rainbow variantBe careful, this banner can be closed
Utilisation
Placez l'élément en haut de votre mise en page racine, vous pouvez l'utiliser pour afficher des annonces.
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
Modifiez la variante par défaut.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner variant="rainbow">Hello World</Banner>;Modifier la mise en page
Par défaut, la bannière utilise une balise style pour modifier les mises en page Fumadocs (par exemple réduire la hauteur de la barre latérale).
Vous pouvez le désactiver avec :
import { Banner } from 'fumadocs-ui/components/banner';
<Banner changeLayout={false}>Hello World</Banner>;Fermer
Pour permettre aux utilisateurs de fermer la bannière, attribuez un identifiant à la bannière.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner id="hello-world">Hello World</Banner>;L’état sera automatiquement conservé.