CapDrive
利用ガイド

Image

ロゴ、装飾的な背景、タイル テクスチャなどのゲージ リソースからの画像を表示します。 source リソース名を使用して、スケーリング、トリミング、または繰り返し方法を使用可能なサイズに設定します。

例

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

使い方

  • source はバンドル内画像です。original は元の色を保ち、template の場合だけ color で着色します。repeatMode は画像のタイル化、contentMode は通常の拡縮です。
  • 数値の寸法はポイントです。auto は内容を測り、fill は親が割り当てた空間を使います。先に親の寸法を決めてください。fill や長い文字列は固定サイズの親を拡張しません。

プロパティ

sourcestring

メーターに同梱した画像のファイル名。SF Symbols 名ではありません。

例""
contentMode?"fit" | "fill" | "stretch"

fit は全体表示、fill は領域を埋めて切り抜き、stretch は縦横を伸縮。

例"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

元の画像サイズで敷き詰め。repeat は両軸、repeatX/repeatY は片軸、none は通常表示。

例"none"
renderingMode?"original" | "template"

original は元の色、template は color で着色。

例"original"
color?Paint

HDR 色を含む描画色。

例HDR($env.foreground)
contentAnimation?ContentAnimation

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

例{type: "fade", duration: 0.25}
共通プロパティ
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 (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

アニメーション

アニメーション

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

省略時の動作

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

プロパティ省略時の動作
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

前へ

Group

次のステップ

このページの内容

例使い方プロパティ組み合わせ例アニメーション省略時の動作関連 API