FontSizePicker

使用法

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 の場合、カスタムフォントサイズを選択することはできません。ユーザーは、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 は予約されており、使用できません。

• 必須: いいえ
• デフォルト: []
  

onChange: ( value: number | string | undefined, selectedItem?: FontSize ) => void

新しいフォントサイズの値を受け取る関数です。

onChange がパラメータなしで呼び出された場合、値をリセットする必要があります。その文脈でリセットが意味することに従って、フォントサイズを未定義に設定するか、フォントサイズを開始値に設定します。

• 必須: はい
  

size: ‘default’ | ‘__unstable-large’

コントロールのサイズ。

• 必須: いいえ
• デフォルト: 'default'
  

units: string[]

カスタムフォントサイズ選択のための利用可能な単位。

• 必須: いいえ
• デフォルト: [ 'px', 'em', 'rem', 'vw', 'vh' ]
  

value: number | string

現在のフォントサイズの値。

• 必須: いいえ
  

withReset: boolean

もし true の場合、カスタムフォントサイズがアクティブなときに入力フィールドの横にリセットボタンが表示されます。 disableCustomFontSizes が true の場合は効果がありません。

• 必須: いいえ
• デフォルト: true
  

withSlider: boolean

もし true の場合、カスタムフォントサイズがアクティブなときに入力フィールドの横にスライダーが表示されます。 disableCustomFontSizes が true の場合は効果がありません。

• 必須: いいえ
• デフォルト: false
  

__next40pxDefaultSize: boolean

将来のバージョンでデフォルトサイズになる大きなデフォルト高さを選択し始めます。

• 必須: いいえ
• デフォルト: false