AI Magic 3DDocStendardo
Aggiungi un banner al tuo sito
Be careful, Fumadocs v99 has released
Using the
rainbow variantBe careful, this banner can be closed
Utilizzo
Metti l'elemento nella parte superiore del layout principale, puoi usarlo per visualizzare gli annunci.
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
Modifica la variante predefinita.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner variant="rainbow">Hello World</Banner>;Cambia layout
Per impostazione predefinita, il banner utilizza un tag style per modificare i layout di Fumadocs (ad esempio ridurre l'altezza della barra laterale).
Puoi disabilitarlo con:
import { Banner } from 'fumadocs-ui/components/banner';
<Banner changeLayout={false}>Hello World</Banner>;Chiudi
Per consentire agli utenti di chiudere il banner, assegnare un ID al banner.
import { Banner } from 'fumadocs-ui/components/banner';
<Banner id="hello-world">Hello World</Banner>;Lo stato verrà automaticamente mantenuto.