CapDrive
利用ガイド

Symbol

SF Symbols を使用して、速度計、温度計などのシステム アイコンを描画します。シンボルのフォントサイズ、フォントの太さ、色付け方法を設定できます。特定のシンボルが使用できるかどうかは、デバイスのシステムによって異なります。

例

function main() {
  return (
    <Symbol
      name="speedometer"
      fontSize={36}
      renderingMode="hierarchical"
      color={$env.accent}
    />
  );
}

使い方

  • name はファイル名でなく SF Symbols の名前です。fontSize は記号の尺度、width/height は入れ物の寸法です。paletteColors はレイヤー用で、OS にない記号は独自画像に変換されません。
  • 数値の寸法はポイントです。auto は内容を測り、fill は親が割り当てた空間を使います。先に親の寸法を決めてください。fill や長い文字列は固定サイズの親を拡張しません。

プロパティ

namestring

speedometer などの SF Symbols 名。対応状況は OS に依存。

例"location.north.fill"
fontSize?number

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

例14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

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

例"regular"
imageScale?"small" | "medium" | "large"

fontSize と組み合わせる相対サイズ small、medium、large。

例"medium"
renderingMode?"monochrome" | "hierarchical" | "palette" | "multicolor"

monochrome は単色、hierarchical は階調、palette は paletteColors、multicolor は元の多色。

例"monochrome"
color?Paint

HDR 色を含む描画色。

例HDR($env.foreground)
paletteColors?[Color] | [Color, Color] | [Color, Color, Color]

palette モードで各レイヤーに使う 1–3 色。

例["red", "blue"]
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 alignment="firstTextBaseline" spacing={8}>
      <Symbol
        name="speedometer"
        fontSize={32}
        renderingMode="hierarchical"
        color={$env.accent}
      />
      <Text fontSize={40}>78</Text>
      <Text fontSize={14}>km/h</Text>
    </HStack>
  );
}

アニメーション

アニメーション

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

省略時の動作

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

プロパティ省略時の動作
fontSize14
fontWeight"regular"
imageScale"medium"
renderingMode"monochrome"
colorHDR($env.foreground)

Text

HStack

Color / Gradient

CardContent

前へ

RepeatedLayout

次のステップ

このページの内容

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