Component Reference - Text - 《WordPress開発者リソース》日本語

使用法
プロパティ

使用法

Text は、HTML p や span のような任意のテキストコンテンツをレンダリングするために使用できます。

import { __experimentalText as Text } from '@wordpress/components';
function Example() {
   return <Text>Code is Poetry</Text>;
}

プロパティ

adjustLineHeightForInnerControls

タイプ: "large","medium","small","xSmall"

テキストとコントロール要素（例: TextInput）をレンダリングするコンテンツに対して適切な行の高さの値を自動的に計算します。

import { __experimentalText as Text, TextInput } from '@wordpress/components';
function Example() {
   return (
   <Text adjustLineHeightForInnerControls={"small"}>
   Lorem ipsum dolor sit amet, consectetur
   <TextInput value="adipiscing elit..." />
   </Text>
   );
}

align

タイプ: CSSProperties['textAlign']

テキストの配置を調整します。

import { __experimentalText as Text } from '@wordpress/components';
function Example() {
   return (
   <Text align="center" isBlock>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit...
   </Text>
   );
}

color

タイプ: CSSProperties['color']

テキストの色を調整します。

display

タイプ: CSSProperties['display']

CSSの表示を調整します。

ellipsis

タイプ: string

truncate が設定されているときの省略記号の文字列。

ellipsizeMode

タイプ: "auto","head","tail","middle"

どこで切り捨てるかを決定します。たとえば、テキストを真ん中で切り捨てることができます。これを行うには、ellipsizeMode を middle に設定し、テキスト limit を指定する必要があります。

auto: limit なしで自動的にコンテンツを末尾でトリミングします。
head: コンテンツを先頭でトリミングします。limit が必要です。
middle: コンテンツを中央でトリミングします。limit が必要です。
tail: コンテンツを末尾でトリミングします。limit が必要です。

highlightCaseSensitive

タイプ: boolean

正規表現で意味のある highlightWords の文字をエスケープします。

highlightEscape

タイプ: boolean

highlightWords が大文字と小文字を区別するかどうかを決定します。

highlightSanitize

タイプ: boolean

検索語の配列。文字列の検索用語は、highlightEscape が true でない限り、自動的に正規表現にキャストされます。

highlightWords

タイプ: any[]

Text 内の文字や単語は、highlightWords を使用してハイライトできます。

import { __experimentalText as Text } from '@wordpress/components';
function Example() {
   return (
   <Text highlightWords={ [ 'pi' ] }>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
   neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
   mollis mi. Morbi id elementum massa. Suspendisse interdum auctor
   ligula eget cursus. In fermentum ultricies mauris, pharetra
   fermentum erat pellentesque id.
   </Text>
   );
}

isBlock

タイプ: boolean

Text に display: block を持たせます。

注意: テキストの切り捨ては、isBlock が false の場合にのみ機能します。

isDestructive

タイプ: boolean

破壊的な色をレンダリングします。

limit

タイプ: number

truncate が設定されているときの最大文字数を決定します。

lineHeight

タイプ: CSSProperties['lineHeight']

タイポグラフィシステムに基づいてすべてのテキストの行の高さを調整します。

numberOfLines

タイプ: number

テキストコンテンツを指定された numberOfLines に制限し、末尾に ellipsis を追加します。

optimizeReadabilityFor

タイプ: CSSProperties['color']

Text の色は、最適な可読性のために背景色に適応できます。optimizeReadabilityFor は、標準のCSSカラー値（例: Hex, RGB, HSL など）に加えて、CSS変数を受け入れることができます。

import { __experimentalText as Text, View } from '@wordpress/components';
function Example() {
   const backgroundColor = 'blue';
   return (
   <View css={ { backgroundColor } }>
   <Text optimizeReadabilityFor={ backgroundColor }>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Text>
   </View>
   );
}

size

タイプ: CSSProperties['fontSize'],TextSize

タイポグラフィシステムに基づいてテキストサイズを調整します。Text は、幅広いフォントサイズをレンダリングでき、自動的に計算されてタイポグラフィシステムに適応されます。size の値は、システムプリセット、number、またはカスタム単位値（string）で、30em のようなものです。

import { __experimentalText as Text } from '@wordpress/components';
function Example() {
   return <Text size="largeTitle">Code is Poetry</Text>;
}

truncate

タイプ: boolean

テキストの切り捨てを有効にします。truncate が設定されているとき、さまざまな方法で長いテキストを切り捨てることができます。

注意: isBlock プロパティが true に設定されている場合、テキストの切り捨ては機能しません。

import { __experimentalText as Text } from '@wordpress/components';
function Example() {
   return (
   <Text truncate>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
   neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
   mollis mi. Morbi id elementum massa. Suspendisse interdum auctor
   ligula eget cursus. In fermentum ultricies mauris, pharetra
   fermentum erat pellentesque id.
   </Text>
   );
}

upperCase

タイプ: boolean

テキストコンテンツを大文字にします。

variant

タイプ: "muted"

テキストのスタイルのバリエーションを調整します。

import { __experimentalText as Text } from '@wordpress/components';
function Example() {
   return <Text variant="muted">Code is Poetry</Text>;
}

weight

タイプ: CSSProperties['fontWeight'],TextWeight

テキストのフォントウェイトを調整します。