16aaf55a91
- Updated content collections to include new schemas for better document handling. - Added new documentation files for comparisons, customization, and internationalization. - Introduced a manual installation guide and improved markdown support. - Updated package.json with new dependencies for enhanced functionality. - Added new images for documentation and improved layout components for better user experience. - Adjusted TypeScript configurations for better path management.
62 lines
1.1 KiB
Plaintext
62 lines
1.1 KiB
Plaintext
---
|
|
title: Banner
|
|
description: Add a banner to your site
|
|
preview: banner
|
|
---
|
|
|
|
## Usage
|
|
|
|
Put the element at the top of your root layout, you can use it for displaying announcements.
|
|
|
|
```tsx
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Variant
|
|
|
|
Change the default variant.
|
|
|
|
```tsx
|
|
import { Banner } from 'fumadocs-ui/components/banner';
|
|
|
|
<Banner variant="rainbow">Hello World</Banner>;
|
|
```
|
|
|
|
### Change Layout
|
|
|
|
By default, the banner uses a `style` tag to modify Fumadocs layouts (e.g. reduce the sidebar height).
|
|
You can disable it with:
|
|
|
|
```tsx
|
|
import { Banner } from 'fumadocs-ui/components/banner';
|
|
|
|
<Banner changeLayout={false}>Hello World</Banner>;
|
|
```
|
|
|
|
### Close
|
|
|
|
To allow users to close the banner, give the banner an ID.
|
|
|
|
```tsx
|
|
import { Banner } from 'fumadocs-ui/components/banner';
|
|
|
|
<Banner id="hello-world">Hello World</Banner>;
|
|
```
|
|
|
|
The state will be automatically persisted.
|