Text(キャラクターディスプレイ)


Text(キャラクターディスプレイ)

1行または複数行のテキストを表示します。

Textコンポーネントの例

{
  "type": "Text",
  "textAlign": "center",
  "text": "こんにちは。 ご用件を伺います。"
}

Textのプロパティ

Textコンポーネントには、標準のコンポーネントプロパティに加えて次のプロパティがあります。

プロパティ デフォルト 動的 説明
msPerCharacter 整数 500 × マーキーテキストの文字あたりのスクロール時間です。
overflow wrap、marquee wrap × テキストが幅より長い場合の動作を指定します。
text 文字列 "" テキストブロックに表示するデータです。
textAlign auto、left、center、right auto × 水平方向の位置揃えを指定します。
textAlignVertical top、center、bottom top × 垂直方向の位置揃えを指定します。

コンポーネントがイベントのターゲットである場合(イベントの定義を参照)、event.targetに以下の値が報告されます。

"event": {
  "target": {
    "disabled": Boolean, // コンポーネントが無効の場合はtrue
    "id": ID,            // コンポーネントのID   
    "uid": UID,          // ランタイムで生成されたコンポーネントの一意のID
    "height": Number,    // コンポーネントの文字単位の高さ(パディングを含む)
    "text": String,      // 表示されるテキスト
    "width": Number      // コンポーネントの文字単位の幅(パディングを含む)
  }
}

msPerCharacter

overflowがmarqueeの場合に文字をスクロールする時間です。たとえば、この値を500に設定し、30文字のディスプレイに「Winter storm watch from Thursday afternoon through late Tuesday night…」というテキストを表示すると、まず「Winter storm watch from Thursd」がレンダリングされ、500ミリ秒後に「inter storm watch from Thursda」に変わり、さらに500ミリ秒後に「nter storm watch from Thursday」に変わります。

overflow

テキストがテキストフィールドの幅より長い場合の動作を定義します。サポートされているオプションは次のとおりです。

プロパティ値 説明
wrap テキストフィールドの高さが2文字以上の場合、テキストを次の行に折り返します。それ以外の場合はテキストを切り詰めます。
marquee msPerCharacterプロパティで定義される速さでテキストをスクロールします(この場合、msPerCharacterプロパティの設定が必要です)。

marqueeの場合、textプロパティにスペースを挿入することで表示を微調整できます。これにより、初期表示や折り返しを制御できます。たとえば、8文字のディスプレイでは次のように表示されます。

"text"の値 初期表示 4文字シフト後
"123456789" "12345678" "56789123"
" 123456789" " 1234567" "456789 1"
"123456789 " "12345678" "56789 12"

text

テキストブロックに表示する文字列データです。設定されていない場合、空の文字列が表示されます。テキストブロックでは、簡単なマークアップがサポートされます。

タグ 説明
<br> 改行を挿入します。改行は繰り返すことができます。 行1<br>行2

マークアップ要素は入れ子にできます。マークアップの入れ子が不適切な場合の動作は未定義です。

テキストに改行が含まれている場合、overflowをmarqueeに設定することはサポートされません。

テキスト内のマークアップ文字は、文字実体参照で置き換える必要があります。

実体 文字 説明
&amp; & アンパサンド
&lt; < 小なり記号
&gt; > 大なり記号
&#nn; 任意 10進数のUnicodeコードポイントです。「nn」は有効な整数です。
&#xnn; 任意 16進数のUnicodeコードポイントです。「nn」は有効な16進数です。

数値実体参照は10進数と16進数で表記できます。たとえば、©は&#169;または&#xa9;と表記できます。

文字列「Copyright &\#169; 2018, Simon \&amp; Schuster. \<br\>All Rights Reserved」は次のようにレンダリングされます。

Copyright © 2018, Simon & Schuster.
All Rights Reserved

textAlign

テキストの行の位置揃えを制御します。left、center、right、autoのいずれかを指定できます。デフォルトは「auto」で、デフォルトのフォントの記述方向に従います(英語の場合は左揃えなど)。

textAlignが「center」で1行の表示文字数が偶数の場合は、デフォルトで番号の小さい側に配置されます。たとえば、テキスト「C」は、6文字のディスプレイでは3文字目に表示されます(インデックスを1~6とした場合)。

textAlignVertical

テキストボックス内のテキストの配置を指定します。テキストボックスの高さがテキストコンテンツよりも大きい場合にのみ使用されます。デフォルトは「top」です。

この値が「center」で表示行数が偶数の場合は、デフォルトで番号の小さい側に配置されます。たとえば、テキスト「Center line」は、6行のディスプレイでは3行目に表示されます(インデックスを1~6とした場合)。


このページは役に立ちましたか?

最終更新日: 2025 年 12 月 17 日