Компонент Scrollable из библиотеки @wordpress/components предоставляет удобный способ создания прокручиваемых контейнеров. Это экспериментальная функция, что означает, что компонент находится на стадии разработки и может претерпеть значительные изменения в будущем. Тем не менее, она уже позволяет организовать прокрутку контента в контейнерах с заданной высотой или шириной.
Зачем использовать Scrollable?
Компонент Scrollable удобен, когда вам нужно ограничить видимую область содержимого, которое может выходить за пределы контейнера. Он добавляет полосу прокрутки по вертикали или горизонтали в зависимости от того, как прокачивается контент. Это особенно полезно для случаев, когда вы хотите, чтобы пользователь мог прокручивать только часть контента (например, список или таблицу), при этом не нарушая общий дизайн.
Основное использование компонента Scrollable
Пример базового использования компонента Scrollable:
import { __experimentalScrollable as Scrollable } from '@wordpress/components';
function Example() {
return (
<Scrollable style={{ maxHeight: 200 }}>
<div style={{ height: 500 }}>
<p>Это большой контент, который будет прокручиваться.</p>
<p>Еще один блок контента...</p>
<p>Продолжаем прокручивать...</p>
</div>
</Scrollable>
);
}
Объяснение кода
- Контейнер Scrollable
В примере выше создается контейнер с компонентомScrollable. В свойствоstyleпередается максимальная высота контейнераmaxHeight: 200. Это ограничивает высоту контейнера, при этом добавляется полоса прокрутки, если содержимое выходит за пределы этой высоты. - Дочерние элементы (children)
Внутри контейнераScrollableнаходится блокdivс высотой 500px. Поскольку высота блока превышает максимальную высоту контейнера, автоматически появляется вертикальная полоса прокрутки, которая позволяет пользователю прокручивать контент. - Рендеринг прокрутки
По умолчанию компонентScrollableдобавляет вертикальную полосу прокрутки (y), если контент не помещается в контейнер.
Описание параметров (Props)
children
Тип:ReactNode
Обязательный: Да
Описание: Содержимое, которое будет вложено в прокручиваемый контейнер. Это могут быть любые элементы или компоненты, которые вы хотите поместить внутрь прокручиваемой области.scrollDirection
Тип:string
Обязательный: Нет
Значения:x,y,auto
Описание: Определяет направление прокрутки.y(по умолчанию) — добавляется вертикальная полоса прокрутки, если содержимое выходит за пределы контейнера.x— добавляется горизонтальная полоса прокрутки.auto— добавляются полосы прокрутки автоматически, если контент выходит за пределы по любой оси.
smoothScroll
Тип:boolean
Обязательный: Нет
Значение по умолчанию:false
Описание: Включает или отключает плавную прокрутку с помощью CSS. Если установлено вtrue, прокрутка будет происходить плавно.
Пример использования с различными параметрами
В этом примере демонстрируются различные способы настройки компонента Scrollable, включая направление прокрутки и плавную прокрутку:
import { __experimentalScrollable as Scrollable } from '@wordpress/components';
function CustomScrollable() {
return (
<div>
{/* Прокрутка только по вертикали */}
<h3>Vertical Scroll</h3>
<Scrollable style={{ maxHeight: 200 }} scrollDirection="y">
<div style={{ height: 500 }}>
<p>Это контент с вертикальной прокруткой.</p>
</div>
</Scrollable>
{/* Прокрутка только по горизонтали */}
<h3>Horizontal Scroll</h3>
<Scrollable style={{ maxWidth: 300 }} scrollDirection="x">
<div style={{ width: 500 }}>
<p>Это контент с горизонтальной прокруткой.</p>
</div>
</Scrollable>
{/* Прокрутка с плавным скроллингом */}
<h3>Smooth Scroll</h3>
<Scrollable style={{ maxHeight: 200 }} smoothScroll={true}>
<div style={{ height: 500 }}>
<p>Прокрутка с плавным переходом.</p>
</div>
</Scrollable>
</div>
);
}
Объяснение примеров
- Вертикальная прокрутка
В первом примере контейнер ограничен высотой 200px и отображает вертикальную полосу прокрутки. Для этого используется свойствоscrollDirection="y", которое указывает, что прокрутка будет только по вертикали. - Горизонтальная прокрутка
Во втором примере контейнер ограничен шириной 300px, и используется горизонтальная прокрутка с помощьюscrollDirection="x". Это позволяет прокручивать контент в горизонтальной плоскости, если его ширина превышает указанную. - Плавная прокрутка
В третьем примере добавлена плавная прокрутка через параметрsmoothScroll={true}, что делает прокрутку более приятной для пользователя.
Важные моменты
- Экспериментальный статус
КомпонентScrollableнаходится на стадии разработки и может изменяться в будущих версиях библиотеки. Это означает, что интерфейс и функциональность компонента могут претерпеть значительные изменения. - Использование для контейнеров с ограниченным размером
Компонент идеально подходит для создания прокручиваемых областей с ограниченным размером. Это может быть полезно при создании интерфейсов, где необходимо отображать большое количество данных, не нарушая общий вид страницы.
Заключение
Компонент Scrollable — это полезный инструмент для создания прокручиваемых областей с заданными размерами. С помощью этого компонента можно легко ограничить видимую часть содержимого и добавить соответствующие полосы прокрутки для улучшения взаимодействия с пользователем. Несмотря на то, что компонент находится в экспериментальной стадии, он уже может быть полезен для создания прокручиваемых контейнеров в проектах на WordPress.