FontSizePicker 是一个 React 组件，它渲染一个允许用户选择字体大小的界面。
该组件渲染一个用户界面，允许用户选择预定义的（常用）字体大小，并在启用该功能时包含一个选项，允许用户选择自定义字体大小（通过选择值）。
用法
import { useState } from 'react';
import { FontSizePicker } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const fontSizes = [
{
name: __( 'Small' ),
slug: 'small',
size: 12,
},
{
name: __( 'Big' ),
slug: 'big',
size: 26,
},
];
const fallbackFontSize = 16;
const MyFontSizePicker = () => {
const [ fontSize, setFontSize ] = useState( 12 );
return (
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSize }
fallbackFontSize={ fallbackFontSize }
onChange={ ( newFontSize ) => {
setFontSize( newFontSize );
} }
/>
);
};
...
<MyFontSizePicker />
属性
该组件接受以下属性：
disableCustomFontSizes: boolean
如果为 true，则无法选择自定义 fontSize。用户将被强制从 fontSizes 中传递的预定义大小中选择一个。
- 必需：否
- 默认值：
false
fallbackFontSize: number
如果不存在值，此属性定义字体大小选择器滑块的起始位置。仅在 withSlider 为 true 时相关。
- 必需：否
fontSizes: FontSize[]
字体大小对象数组。对象应包含 size、name 和 slug 属性。size 属性包含一个数字，表示字体大小值，单位为 px，或者是一个字符串，指定应使用的字体大小 CSS 属性，例如：“13px”、“1em” 或 “clamp(12px, 5vw, 100px)”。name 属性包括该字体大小的标签，例如：Small。slug 属性是一个字符串，作为字体大小的唯一标识符。用于类生成过程。
注意：保留 default 和 custom 这两个 slugs，不能直接使用。
- 必需：否
- 默认值：
[]
onChange: ( value: number | string | undefined, selectedItem?: FontSize ) => void
接收新字体大小值的函数。
如果在不带任何参数的情况下调用 onChange，它应重置值，具体取决于上下文中“重置”的含义，例如，将字体大小设置为 undefined 或将字体大小设置回初始值。
- 必需：是
units: string[]
自定义字体大小选择的可用单位。
- 必需：否
- 默认值：
[ 'px', 'em', 'rem', 'vw', 'vh' ]
value: number | string
当前字体大小值。
注意：要使 units 属性生效，当前字体大小值必须指定为带有单位的字符串（例如 '12px' 而不是 12）。当字体大小以数字形式提供时，组件将在“无单位模式”下运行，此时 units 属性无效。
- 必需：否
valueMode: ‘literal’ | ‘slug’
确定如何解释 value 属性。
'literal'：value属性包含实际的字体大小值（数字或字符串）。'slug'：value属性包含所选字体大小的 slug。必需：否
- 默认值：
'literal'
withReset: boolean
如果为 true，当激活自定义字体大小时，输入字段旁边将显示一个重置按钮。当 disableCustomFontSizes 为 true 时无效。
- 必需：否
- 默认值：
true
withSlider: boolean
如果为 true，当激活自定义字体大小时，输入字段旁边将显示一个滑块。当 disableCustomFontSizes 为 true 时无效。
- 必需：否
- 默认值：
false