#Banner

Banner отображает уведомительный баннер в верхней части страницы, поддерживая навигацию по ссылкам и функцию закрытия.

#Использование

Используйте компонент Banner через пользовательский Layout:

import { Layout as BasicLayout, Banner } from '@rspress/core/theme';
import { useLang } from '@rspress/core/runtime';

const Layout = () => {
  const lang = useLang();
  return (
    <BasicLayout
      beforeNav={
        <Banner
          href="/"
          message={
            lang === 'en'
              ? '🚧 Rspress 2.0 document is under development'
              : '🚧 Документация Rspress 2.0 в процессе доработки'
          }
        />
      }
    />
  );
};

export { Layout };

#Пропсы

type BannerProps = {
  /** Отображать ли баннер, по умолчанию — true */
  display?: boolean;
  /** Пользовательское имя CSS-класса */
  className?: string;
} & (
  | {
      /** Способ хранения состояния закрытия, по умолчанию — 'localStorage' */
      storage?: 'localStorage' | 'sessionStorage' | false;
      /** Ключ в хранилище для состояния закрытия, по умолчанию — 'rp-banner-closed' */
      storageKey?: string;
      /** Ссылка для перехода при клике */
      href: string;
      /** Текст/содержимое сообщения для отображения */
      message: string | ReactNode;
    }
  | {
      /** Полностью пользовательский контент */
      customChildren: ReactNode;
    }
);

#display

• Тип: boolean
• По умолчанию: true

Управляет тем, отображается ли Banner.

#storage

• Тип: 'localStorage' | 'sessionStorage' | false
• По умолчанию: 'localStorage'

Как сохранять состояние закрытия баннера после того, как пользователь его закрыл. Установите значение false, чтобы полностью отключить сохранение состояния.

#storageKey

• Тип: string
• По умолчанию: 'rp-banner-closed'

Ключ в хранилище для состояния закрытия.

#href

• Тип: string

Ссылка для перехода при клике на Banner.

#message

• Тип: string | ReactNode

Содержимое сообщения, отображаемое в Banner.

#customChildren

• Тип: ReactNode

Полностью пользовательский контент баннера. При использовании этого свойства параметры href и message будут проигнорированы.