FontSizePicker — это компонент WordPress для создания интерфейса выбора размера шрифта. Он позволяет пользователям выбирать заранее заданные (стандартные) размеры шрифта и, при необходимости, задавать произвольный размер шрифта с помощью пользовательского ввода, если эта функция включена. FontSizePicker настраивается с помощью нескольких параметров, таких как предустановленные размеры, разрешение на выбор пользовательского размера и возможность выбора единиц измерения.
Использование FontSizePicker
Ниже представлен простой пример использования FontSizePicker, где определены предустановленные размеры шрифта и задан размер по умолчанию.
import { useState } from 'react';
import { FontSizePicker } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const fontSizes = [
{
name: __('Small'),
slug: 'small',
size: 14,
},
{
name: __('Medium'),
slug: 'medium',
size: 18,
},
{
name: __('Large'),
slug: 'large',
size: 24,
},
];
const fallbackFontSize = 16;
const MyFontSizePicker = () => {
const [fontSize, setFontSize] = useState(fallbackFontSize);
return (
<FontSizePicker
fontSizes={fontSizes}
value={fontSize}
fallbackFontSize={fallbackFontSize}
onChange={(newFontSize) => setFontSize(newFontSize)}
withReset={true}
withSlider={true}
/>
);
};
export default MyFontSizePicker;
Описание Параметров
Рассмотрим параметры, которые компонент FontSizePicker принимает для кастомизации.
1. disableCustomFontSizes
- Тип: Boolean
- Обязательный: Нет
- По умолчанию:
false - Описание: Если установлено значение
true, пользователь не сможет выбрать произвольный размер шрифта и будет вынужден выбирать только из заданных в параметреfontSizes.
disableCustomFontSizes={true}
2. fallbackFontSize
- Тип: Number
- Обязательный: Нет
- Описание: Указывает начальный размер шрифта, используемый, если значение
valueне задано. Важен только при включенномwithSlider.
fallbackFontSize={14}
3. fontSizes
- Тип: Массив объектов
- Обязательный: Нет
- По умолчанию:
[] - Описание: Массив с объектами предустановленных размеров шрифта. Каждый объект должен содержать следующие свойства:
- size: Число или строка, указывающая размер шрифта, например,
12px,1em,20px. - name: Название размера, отображаемое в интерфейсе, например, «Маленький».
- slug: Уникальный идентификатор для данного размера. Зарезервированные значения —
defaultиcustom.
- size: Число или строка, указывающая размер шрифта, например,
fontSizes={[
{ name: 'Small', slug: 'small', size: 12 },
{ name: 'Large', slug: 'large', size: 30 },
]}
4. onChange
- Тип: Функция
- Обязательный: Да
- Описание: Функция-обработчик, вызываемая при изменении размера шрифта. Первый параметр — новое значение размера шрифта.
onChange={(value) => console.log('Selected font size:', value)}
5. size
- Тип:
'default'или'__unstable-large' - Обязательный: Нет
- По умолчанию:
'default' - Описание: Задает размер интерфейса FontSizePicker. Значение
'__unstable-large'увеличивает высоту компонента.
size="__unstable-large"
6. units
- Тип: Массив строк
- Обязательный: Нет
- По умолчанию:
['px', 'em', 'rem', 'vw', 'vh'] - Описание: Задает доступные единицы измерения для пользовательского выбора размера.
units={['px', 'em', 'rem']}
7. value
- Тип: Число или строка
- Обязательный: Нет
- Описание: Текущее значение размера шрифта.
value={18}
8. withReset
- Тип: Boolean
- Обязательный: Нет
- По умолчанию:
true - Описание: Если
true, в интерфейсе отображается кнопка сброса рядом с полем для ввода, которая позволяет вернуться к начальному значению.
withReset={true}
9. withSlider
- Тип: Boolean
- Обязательный: Нет
- По умолчанию:
false - Описание: Если
true, добавляется ползунок для выбора произвольного размера шрифта.
withSlider={true}
10. __next40pxDefaultSize
- Тип: Boolean
- Обязательный: Нет
- По умолчанию:
false - Описание: Если включено, компонент использует новые стили с увеличенной высотой по умолчанию, которые станут стандартом в будущих версиях.
__next40pxDefaultSize={true}
Пример 1: Использование FontSizePicker с Предустановленными Размером и Отключенной Пользовательской Настройкой
В этом примере создается FontSizePicker, в котором пользователю доступны только предустановленные размеры шрифта.
import { useState } from 'react';
import { FontSizePicker } from '@wordpress/components';
const CustomFontSizePicker = () => {
const [fontSize, setFontSize] = useState(14);
const fontSizes = [
{ name: 'Tiny', slug: 'tiny', size: 10 },
{ name: 'Regular', slug: 'regular', size: 16 },
{ name: 'Huge', slug: 'huge', size: 32 },
];
return (
<FontSizePicker
fontSizes={fontSizes}
value={fontSize}
onChange={setFontSize}
disableCustomFontSizes={true}
/>
);
};
Пример 2: FontSizePicker с Пользовательскими Единицами Измерения и Ползунком
Здесь используется ползунок и возможность выбора пользовательского размера с несколькими единицами измерения.
import { useState } from 'react';
import { FontSizePicker } from '@wordpress/components';
const FlexibleFontSizePicker = () => {
const [fontSize, setFontSize] = useState('16px');
return (
<FontSizePicker
fontSizes={[
{ name: 'Small', slug: 'small', size: '12px' },
{ name: 'Medium', slug: 'medium', size: '18px' },
]}
value={fontSize}
onChange={setFontSize}
withSlider={true}
units={['px', 'em', '%']}
/>
);
};
Пример 3: FontSizePicker с Возможностью Сброса
В этом примере добавляется возможность сброса к начальному значению при использовании произвольного размера шрифта.
import { useState } from 'react';
import { FontSizePicker } from '@wordpress/components';
const ResettableFontSizePicker = () => {
const [fontSize, setFontSize] = useState('20px');
return (
<FontSizePicker
fontSizes={[
{ name: 'Extra Small', slug: 'xs', size: '10px' },
{ name: 'Extra Large', slug: 'xl', size: '40px' },
]}
value={fontSize}
onChange={setFontSize}
withReset={true}
fallbackFontSize={16}
/>
);
};
Заключение
Компонент FontSizePicker в WordPress — это мощный инструмент для создания интерфейсов с выбором размера шрифта. Он поддерживает предустановленные значения, пользовательские размеры и различные единицы измерения, что делает его удобным для гибкой настройки дизайна.