Footer

mobile
withDivider
view

Компоненты футера страницы. Для десктопной версии используется Footer, а для мобильной — MobileFooter. Оба компонента имеют одинаковые свойства.

PropTypes

СвойствоТипОбязательноеЗначение по умолчаниюОписание
classNameStringИмя класса футера.
menuItemsFooterMenuItem[]Список элементов меню футера.
withDividerBooleanОтображает верхнюю границу футера.
moreButtonTitleStringЗаголовок кнопки развертывания элементов.
onMoreButtonClickMouseEventHandler<HTMLElement>Обработчик клика по кнопке развертывания элементов.
viewnormal или clearВид футера.
logoLogoPropsСвойства логотипа сервиса.
logoWrapperClassNamestringИмя класса обертки логотипа.
copyrightstringАвторские права.

View (вид)

  • normal — белый фон и все настроенные элементы.
  • clear — прозрачный фон и только авторские права.

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

Демонстрационные примеры:

  • Десктопная версия: src/components/Footer/desktop/__stories__/FooterShowcase.tsx.
  • Мобильная версия: src/components/Footer/mobile/__stories__/MobileFooterShowcase.tsx.

Практические примеры

import { Footer } from '@gravity-ui/navigation';

<Footer
    className="page-footer"
    withDivider={false}
    moreButtonTitle="Show more"
    copyright={`@ ${new Date().getFullYear()} "My Service"`}
    logo={{
        icon: logoIcon,
        iconSize: 24,
        text: 'My Service'
    }}
    menuItems={[
        {
            text: 'About Service',
            href: 'https://gravity-ui.com/',
            target: 'blank',
        },
        {
            text: 'Documentation',
            href: 'https://gravity-ui.com/',
            target: 'blank',
        },
        {
            text: 'Confidential',
            href: 'https://gravity-ui.com/',
            target: 'blank',
        },
    ]}
/>

<Footer
    className="page-footer"
    copyright={`@ ${new Date().getFullYear()} "My Service"`}
    view="clear"
/>

MobileFooter

import { MobileFooter } from '@gravity-ui/navigation';

<MobileFooter
    className="page-footer"
    withDivider={false}
    moreButtonTitle="Show more"
    copyright={`@ ${new Date().getFullYear()} "My Service"`}
    logo={{
        icon: logoIcon,
        iconSize: 24,
        text: 'My Service'
    }}
    menuItems={[
        {
            text: 'About Service',
            href: 'https://gravity-ui.com/',
            target: 'blank',
        },
        {
            text: 'Documentation',
            href: 'https://gravity-ui.com/',
            target: 'blank',
        },
        {
            text: 'Confidential',
            href: 'https://gravity-ui.com/',
            target: 'blank',
        },
    ]}
/>

<MobileFooter
    className="page-footer"
    copyright={`@ ${new Date().getFullYear()} "My Service"`}
    view="clear"
/>