CapDrive
Kullanım kılavuzu

Symbol

Hız göstergesi, termometre gibi sistem simgelerini çizmek için SF Symbols kullanın. Sembol yazı tipi boyutu, yazı tipi ağırlığı ve renklendirme yöntemi ayarlanabilir. Belirli bir sembolün mevcut olup olmadığı cihaz sistemine bağlıdır.

Örnek

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

Kullanım

  • name dosya değil SF Symbols adıdır. fontSize simgeyi, width/height kapsayıcıyı ölçer. paletteColors katman renkleridir. Sistemde olmayan simge özel resme dönüşmez.
  • Sayısal ölçüler noktadır. auto içeriği ölçer, fill ebeveynin ayırdığı alanı kullanır. Önce kapsayıcıyı boyutlandırın; fill veya uzun metin sabit ebeveyni genişletmez.

Özellikler

namestring

speedometer gibi SF Symbols adı; kullanılabilirlik işletim sistemine bağlıdır.

Örnek"location.north.fill"
fontSize?number

Punto cinsinden yazı tipi boyutu.

Örnek14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

Yazı kalınlığı ultraLight ile black arası; regular normaldir.

Örnek"regular"
imageScale?"small" | "medium" | "large"

fontSize ile birlikte göreli small, medium veya large boyutu.

Örnek"medium"
renderingMode?"monochrome" | "hierarchical" | "palette" | "multicolor"

monochrome tek renk, hierarchical tonlar, palette paletteColors, multicolor özgün renkler.

Örnek"monochrome"
color?Paint

HDR renkleri dahil çizim rengi.

ÖrnekHDR($env.foreground)
paletteColors?[Color] | [Color, Color] | [Color, Color, Color]

palette kipindeki simge katmanları için 1–3 renk.

Örnek["red", "blue"]
contentAnimation?ContentAnimation

İçerik değişimi geçişi. Desteklenen type seçilir; duration/delay saniyedir.

Örnek{type: "fade", duration: 0.25}
Ortak özellikler
width?number | "auto" | "fill"

Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.

Örnek100
height?number | "auto" | "fill"

Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.

Örnek80
padding?number

Punto cinsinden içerik iç boşluğu.

Örnek0
x?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
y?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
transform?ViewTransform

Yerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.

Örnek{rotation: 0}
background?Paint

Arka plan rengi veya gradyanı; clear saydamdır.

Örnek"clear"
opacity?number

Tüm View opaklığı: 0 saydam, 1 opak.

Örnek1
cornerRadius?number

Köşe yarıçapı, punto.

Örnek0
clipped?boolean

View sınırlarını aşan çizimi kırpar.

Örnekfalse
clip?"rectangle" | "ellipse"

Kırpma şekli rectangle veya ellipse; Material için false kapatır.

Örnek"rectangle"
mask?View | null

Alfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.

Örnek<Circle width="fill" height="fill" background="white"/>
zIndex?number

Kardeşler arasında çizim sırası; büyük değer öndedir.

Örnek0
blur?number

Bulanıklık yarıçapı, punto; 0 kapatır.

Örnek4
innerShadow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Dış gölge rengi.

ÖrnekHDR("black")
shadowOpacity?number

Gölge opaklığı 0–1; 0 gizler.

Örnek0
shadowRadius?number

Dış gölge bulanıklık yarıçapı, punto.

Örnek4
shadowX?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek0
shadowY?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek2
animations?Animation[]

Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.

Örnek[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Kardeş öğeler arasında kararlı kimlik.

Pratik örnek

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>
  );
}

Animasyon

Animasyon

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

Atlandığında

Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.

ÖzelliklerAtlandığında
fontSize14
fontWeight"regular"
imageScale"medium"
renderingMode"monochrome"
colorHDR($env.foreground)

Text

HStack

Color / Gradient

CardContent

Önceki

RepeatedLayout

Sonraki adım

Bu sayfada

ÖrnekKullanımÖzelliklerPratik örnekAnimasyonAtlandığındaİlgili API’ler