Компонент Placeholder используется для отображения временного заполнителя в WordPress, когда контент еще не загружен или требуется ввести данные. Этот компонент может включать иконки, инструкции, превью и другие элементы, обеспечивая пользователям визуальную подсказку.
Основные возможности и использование
Компонент Placeholder позволяет отобразить текст и/или иконки в определенном месте на странице, чтобы указать на пустое место, ожидающее контента или пользовательского взаимодействия.
Пример использования Placeholder
import { Placeholder } from '@wordpress/components';
import { more } from '@wordpress/icons';
const CustomPlaceholder = () => (
<Placeholder icon={more} label="Загрузка контента...">
<p>Пожалуйста, подождите, пока загружается содержимое.</p>
</Placeholder>
);
Подробное описание параметров Placeholder
1. className
- Описание: CSS-класс, который применяется к контейнеру
divкомпонента. - Тип:
string - Обязательный: Нет
- Пример:
<Placeholder className="custom-placeholder" label="Подготовка блока" />
2. icon
- Описание: Иконка, отображаемая рядом с заголовком. Можно использовать строку, функцию, компонент или оставить пустым (
null). - Тип:
string | Function | Component | null - Обязательный: Нет
- Пример:
import { cloud } from '@wordpress/icons';
<Placeholder icon={cloud} label="Загрузка данных" />
3. instructions
- Описание: Текст, отображаемый в качестве инструкции под заголовком.
- Тип:
string - Обязательный: Нет
- Пример:
<Placeholder label="Добавить изображение" instructions="Нажмите, чтобы выбрать изображение." />
4. isColumnLayout
- Описание: Изменяет расположение дочерних элементов компонента с горизонтального на вертикальное.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false - Пример:
<Placeholder label="Опции настроек" isColumnLayout={true}>
<button>Настроить</button>
<button>Удалить</button>
</Placeholder>
5. label
- Описание: Заголовок заполнителя, указывающий на цель блока.
- Тип:
string - Обязательный: Нет
- Пример:
<Placeholder label="Загрузка данных пользователя" />
6. notices
- Описание: Список уведомлений, который можно отобразить под заголовком.
- Тип:
ReactNode - Обязательный: Нет
- Пример:
import { NoticeList } from '@wordpress/components';
const notices = <NoticeList notices={[{ status: 'error', content: 'Ошибка загрузки данных' }]} />;
<Placeholder label="Ошибка" notices={notices} />
7. preview
- Описание: Превью, отображаемое в виде временного контента внутри заполнителя.
- Тип:
ReactNode - Обязательный: Нет
- Пример:
const previewContent = <img src="https://example.com/image.jpg" alt="Превью" />;
<Placeholder label="Загрузка изображений" preview={previewContent} />
8. withIllustration
- Описание: Включает иллюстрацию для визуализации заполнителя.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false - Пример:
<Placeholder label="Добавить новый блок" withIllustration={true} />
Пример с инструкцией и иконкой
import { Placeholder } from '@wordpress/components';
import { upload } from '@wordpress/icons';
const ImagePlaceholder = () => (
<Placeholder
icon={upload}
label="Загрузить изображение"
instructions="Перетащите изображение или выберите его на вашем устройстве."
/>
);
Пример с вертикальной компоновкой и превью
import { Placeholder } from '@wordpress/components';
const ContentPlaceholder = () => (
<Placeholder
label="Содержимое недоступно"
isColumnLayout={true}
preview={<div style={{ width: '100px', height: '100px', backgroundColor: '#e1e1e1' }}>Превью</div>}
>
<button>Попробовать снова</button>
</Placeholder>
);
Пример с уведомлениями и иллюстрацией
import { Placeholder, NoticeList } from '@wordpress/components';
const notices = [
{ status: 'error', content: 'Ошибка загрузки данных. Проверьте соединение.' },
];
const ErrorPlaceholder = () => (
<Placeholder
label="Произошла ошибка"
notices={<NoticeList notices={notices} />}
withIllustration={true}
/>
);
Пример с кастомным CSS-классом и дополнительным контентом
import { Placeholder } from '@wordpress/components';
const CustomStyledPlaceholder = () => (
<Placeholder
label="Настройки пользователя"
className="user-settings-placeholder"
>
<p>Пожалуйста, настройте параметры профиля.</p>
<button>Изменить настройки</button>
</Placeholder>
);
Заключение
Компонент Placeholder в WordPress предоставляет удобное решение для отображения временного контента или инструкций, пока данные загружаются или ожидается действие пользователя. С его помощью можно адаптировать внешний вид и поведение заполнителя, добавляя уведомления, инструкции и превью, а также изменяя компоновку и добавляя иконки.