Text

読み、単位、または説明テキストを表示します。フォント、フォントサイズ、配置、行の折り返し、切り捨てを設定できます。内容は一律に文字列に変換され、空の値は空として表示されます。

例

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

使い方

内容は toString() に変換され、null/undefined は空になります。Text に Symbol 等を入れず HStack で組み合わせます。width を制限して行数・省略を指定します。minimumScaleFactor=1 は縮小しません。
数値の寸法はポイントです。auto は内容を測り、fill は親が割り当てた空間を使います。先に親の寸法を決めてください。fill や長い文字列は固定サイズの親を拡張しません。

プロパティ

children?TextContent | TextContent[]

子の描画コンテンツ。

fontSize?number

フォントサイズ（ポイント）。

例14

文字の太さ。ultraLight から black、regular が標準。

例"regular"

font?"default" | "rounded" | "monospaced" | "serif"

書体は default、rounded、monospaced、serif。

例"default"

color?Paint

HDR 色を含む描画色。

例HDR($env.foreground)

alignment?"leading" | "center" | "trailing"

使用可能な幅内で leading、center、trailing に文字を揃えます。

例"leading"

lineLimit?number | null

最大行数。null または省略で行数制限なしの折り返し。

例1

truncationMode?"head" | "middle" | "tail"

収まらない文字の省略位置：head、middle、tail。

例"tail"

minimumScaleFactor?number

収まらない文字の最小倍率 0.01–1。1 は縮小しません。

例0.5

monospacedDigits?boolean

数字を等幅にして、値が変わるときの横ずれを防ぎます。

例true

letterSpacing?number

文字間に追加する間隔（ポイント）。

例0

contentAnimation?ContentAnimation

内容変更時の効果。この View 対応の type を選び、duration/delay は秒で指定。

例{type: "numericText"}

共通プロパティ

width?number | "auto" | "fill"

幅。ポイント指定、自動サイズ、親領域への拡張に対応します。

例100

height?number | "auto" | "fill"

高さ。ポイント指定、自動サイズ、親領域への拡張に対応します。

例80

padding?number

コンテンツの内側余白（ポイント）。

例0

x?number

見た目の移動量（ポイント）。x は右、y は下。レイアウトの占有領域は変わりません。

例0

y?number

見た目の移動量（ポイント）。x は右、y は下。レイアウトの占有領域は変わりません。

例0

transform?ViewTransform

レイアウトを変えず全体を変形。移動はポイント、回転・傾きは度、倍率 1 は等倍、基点は 0–1。

例{rotation: 0}

background?Paint

背景の色またはグラデーション。clear は透明。

例"clear"

opacity?number

View 全体の不透明度。0 は透明、1 は不透明。

例1

cornerRadius?number

角丸の半径（ポイント）。

例0

clipped?boolean

View の境界からはみ出す描画を切り抜きます。

例false

clip?"rectangle" | "ellipse"

切り抜き形状は rectangle または ellipse。Material は false で無効化も可能。

例"rectangle"

mask?View | null

アルファマスク用の View。レイアウトに影響せず中央に配置されます。null でマスクを無効にします。

例<Circle width="fill" height="fill" background="white"/>

zIndex?number

兄弟 View の重なり順。大きい値ほど手前。

例0

blur?number

ぼかし半径（ポイント）。0 で無効。

例4

innerShadow?DrawingEffect

効果の色、不透明度、ぼかし半径、x/y オフセット。距離はポイント。

例{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

効果の色、不透明度、ぼかし半径、x/y オフセット。距離はポイント。

例{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

外側の影の色。

例HDR("black")

shadowOpacity?number

外側の影の不透明度 0–1。0 で非表示。

例0

shadowRadius?number

外側の影のぼかし半径（ポイント）。

例4

shadowX?number

影の移動量（ポイント）。x は右、y は下。

例0

shadowY?number

影の移動量（ポイント）。x は右、y は下。

例2

animations?Animation[]

プロパティ変更のアニメーション。duration/delay は秒、from/to は端点、repeat/autoreverse は反復、wrap は周期。

例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

兄弟要素間で安定した識別子。

組み合わせ例

function main() {
  return (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

アニメーション

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizeletterSpacingminimumScaleFactorcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

省略時の動作

表は実装で確認した省略時の動作です。プロパティ例は既定値ではありません。固定結果には明示指定し、環境に依存する寸法やテーマ色を定数と思わないでください。

プロパティ	省略時の動作
`fontSize`	`14`
`fontWeight`	`"regular"`
`font`	`"default"`
`monospacedDigits`	`true`
`minimumScaleFactor`	`1`
`lineLimit`	`null`
`alignment`	`"center"`
`truncationMode`	`"tail"`
`color`	`HDR($env.foreground)`

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

HStack

Symbol

Color / Gradient

このページの内容

Text

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

関連 API

HStack

Symbol

Color / Gradient

このページの内容