ColorIndicator — это компонент WordPress, который отображает указанный цвет в виде цветного круга. Обычно он используется для визуального представления цветовой палитры, применяемой в других компонентах, или для указания активного цвета в настройках.
Основные сведения о ColorIndicator
Компонент ColorIndicator визуально представляет цвет, назначенный через его свойства. Он может отображать одиночный цветной индикатор или использоваться в составе более сложных интерфейсов, таких как боковая панель, для демонстрации набора выбранных цветов.
Применение компонента ColorIndicator
Для использования ColorIndicator импортируйте его из пакета @wordpress/components и передайте нужный цвет с помощью свойства colorValue.
import { ColorIndicator } from '@wordpress/components';
const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
Основные свойства (Props)
className
- Описание: Дополнительные CSS-классы для
<span>элемента, на основе которого строится индикатор. По умолчанию добавляется только классcomponent-color-indicator. - Тип:
string - Обязателен: Нет
- Пример:
<ColorIndicator className="custom-indicator" colorValue="#ff6347" />colorValue
- Описание: Значение цвета, отображаемого индикатором. Поддерживаются любые значения CSS-свойства
background, такие как HEX-код, RGB, HSL или даже градиенты. - Тип:
CSSProperties[ 'background' ] - Обязателен: Да
- Пример:
<ColorIndicator colorValue="linear-gradient(to right, #ff0000, #00ff00)" />
Пример 1: Базовый индикатор цвета
В этом примере создается одиночный индикатор цвета с заданным HEX-кодом. Это минимальная настройка компонента, которая подойдёт для большинства ситуаций, когда нужен простой цветной индикатор.
import { ColorIndicator } from '@wordpress/components';
const BasicColorIndicator = () => (
<ColorIndicator colorValue="#28a745" />
);
Пример 2: Индикатор цвета с дополнительным CSS-классом
Этот пример показывает, как добавить собственный класс для стилизации компонента. В результате индикатор цвета получает дополнительный класс, который можно использовать для настройки внешнего вида с помощью CSS.
import { ColorIndicator } from '@wordpress/components';
const StyledColorIndicator = () => (
<ColorIndicator colorValue="#ff4500" className="styled-color-indicator" />
);
CSS:
.styled-color-indicator {
border: 2px solid #333;
border-radius: 50%;
width: 20px;
height: 20px;
}
Пример 3: Индикатор с градиентом
ColorIndicator поддерживает не только стандартные цвета, но и сложные CSS-градиенты. Этот пример демонстрирует, как использовать линейный градиент для создания цветного индикатора с плавным переходом между цветами.
import { ColorIndicator } from '@wordpress/components';
const GradientColorIndicator = () => (
<ColorIndicator colorValue="linear-gradient(90deg, #ff8c00, #ffd700)" />
);
Пример 4: Несколько цветных индикаторов в боковой панели
Этот пример иллюстрирует использование ColorIndicator в составе боковой панели с набором цветов. Он подходит для интерфейсов, где нужно показать сразу несколько цветов (например, текущую палитру пользователя).
import { ColorIndicator } from '@wordpress/components';
const SidebarColorPalette = () => (
<div className="color-palette-sidebar">
<ColorIndicator colorValue="#ff6347" className="palette-color" />
<ColorIndicator colorValue="#4682b4" className="palette-color" />
<ColorIndicator colorValue="#32cd32" className="palette-color" />
<ColorIndicator colorValue="#8a2be2" className="palette-color" />
</div>
);
CSS:
.color-palette-sidebar {
display: flex;
gap: 10px;
}
.palette-color {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #ddd;
}
Пример 5: Индикатор цвета с RGB-значением
Можно использовать цвет в формате RGB, что бывает удобно, если значения цвета рассчитываются программно. В этом примере ColorIndicator получает RGB-значение для создания индикатора цвета.
import { ColorIndicator } from '@wordpress/components';
const RGBColorIndicator = () => (
<ColorIndicator colorValue="rgb(70, 130, 180)" />
);
Пример 6: Динамическое изменение цвета индикатора
Этот пример демонстрирует, как динамически изменять цвет индикатора. Состояние компонента контролируется с помощью useState, что позволяет пользователю выбрать новый цвет, который будет сразу отображаться.
import { useState } from 'react';
import { ColorIndicator } from '@wordpress/components';
const DynamicColorIndicator = () => {
const [color, setColor] = useState("#0073aa");
const handleColorChange = (event) => {
setColor(event.target.value);
};
return (
<div>
<input
type="color"
value={color}
onChange={handleColorChange}
/>
<ColorIndicator colorValue={color} />
</div>
);
};
Заключение
ColorIndicator — полезный и универсальный компонент для визуального представления цвета. С его помощью можно создать простые и наглядные интерфейсы, показывающие выбранные цвета, текущую палитру или индивидуальные цветовые настройки.