React-компонент Flyout в WordPress: подробное руководство с примерами

Главная - WordPress Codex - React-компонент Flyout в WordPress: подробное руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент Flyout в библиотеке компонентов WordPress используется для создания всплывающего модального окна, содержащего произвольный контент. Он предназначен для показа более сложных элементов, чем простой текст, и похож по назначению на tooltip. Однако этот компонент всё ещё является экспериментальным, что означает возможность значительных изменений в будущем.

Подключение компонента

Для использования Flyout сначала импортируйте его вместе с другими необходимыми компонентами:

import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';

Основной пример

Создадим простой пример с кнопкой, которая открывает и закрывает Flyout при клике. Внутри Flyout разместим элемент Text.

function FlyoutExample() {
    return (
        <Flyout trigger={ <Button>Показать/Скрыть контент</Button> }>
            <Text>Код — это поэзия</Text>
        </Flyout>
    );
}

Подробное описание пропсов

Теперь рассмотрим все доступные свойства (пропсы) компонента Flyout с подробным описанием каждого.

  • state (опциональный)
    • Тип: PopoverStateReturn
    • Это состояние, получаемое от usePopoverState библиотеки Reakit, используемой внутри Flyout. Позволяет контролировать и управлять состоянием видимости Flyout.
  • label (опциональный)
    • Тип: string
    • Этот текст описывает Flyout для скринридеров, улучшая доступность.
  • animated (опциональный)
    • Тип: boolean
    • Указывает, будет ли Flyout анимирован при появлении и исчезновении.
    • По умолчанию: true
  • animationDuration (опциональный)
    • Тип: number
    • Продолжительность анимации в миллисекундах. Указывает, сколько времени займет анимация открытия или закрытия Flyout.
    • По умолчанию: 160
  • baseId (опциональный)
    • Тип: string
    • Базовый ID, используемый для создания уникальных ID элементов внутри Flyout. Это полезно при использовании нескольких Flyout на одной странице, чтобы избежать конфликтов ID.
    • По умолчанию: случайный ID, генерируемый библиотекой Reakit.
  • elevation (опциональный)
    • Тип: number
    • Задает размер тени Flyout. Чем выше значение, тем более заметна тень.
    • По умолчанию: 5
  • maxWidth (опциональный)
    • Тип: CSSProperties['maxWidth']
    • Максимальная ширина для Flyout. Значение может быть указано как числом (например, 300 для пикселей) или строкой (например, '80%' для процентов).
    • По умолчанию: 360
  • onVisibleChange (опциональный)
    • Тип: (...args: any) => void
    • Функция-обработчик, вызываемая при изменении видимости Flyout. Она получает аргументы, передаваемые внутренними событиями.
  • trigger (обязательный)
    • Тип: FunctionComponentElement<any>
    • Элемент, который выступает в роли триггера для управления видимостью Flyout. В примерах обычно используется кнопка, но можно использовать любой элемент, поддерживающий клики.
<Flyout trigger={<Button>Нажми меня</Button>}>
    <Text>Привет! Это мой контент!</Text>
</Flyout>
  • visible (опциональный)
    • Тип: boolean
    • Контролирует, видим ли в данный момент Flyout. Можно использовать для явного управления состоянием Flyout в более сложных случаях.
    • По умолчанию: false
  • placement (опциональный)
    • Тип: PopperPlacement
    • Указывает позицию, в которой будет отображаться Flyout относительно элемента trigger. Возможные значения включают top, bottom, left, right, auto и другие варианты позиционирования, поддерживаемые библиотекой Popper.
    • По умолчанию: auto

Пример с изменением анимации и тени

В этом примере добавим анимацию длительностью 300 мс и увеличим тень до 10:

function CustomFlyoutExample() {
    return (
        <Flyout
            trigger={ <Button>Открыть меню</Button> }
            animated={ true }
            animationDuration={ 300 }
            elevation={ 10 }
        >
            <Text>Контент с дополнительной анимацией и тенями</Text>
        </Flyout>
    );
}

Пример с кастомной шириной и положением

Зададим максимальную ширину 500px и расположим Flyout сверху:

function WideFlyoutExample() {
    return (
        <Flyout
            trigger={ <Button>Показать информацию</Button> }
            maxWidth={ 500 }
            placement="top"
        >
            <Text>Это широкий и расположенный сверху `Flyout`.</Text>
        </Flyout>
    );
}

Заключение

Компонент Flyout предоставляет множество возможностей для создания всплывающих окон с произвольным контентом в WordPress. Используйте свойства для кастомизации отображения, анимации и позиционирования компонента в зависимости от ваших нужд.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg