CapDrive
Panduan penggunaan

Symbol

Gunakan SF Symbols untuk menggambar ikon sistem, seperti speedometer, termometer. Ukuran font simbol, berat font, dan metode pewarnaan dapat diatur. Tersedia atau tidaknya simbol tertentu bergantung pada sistem perangkat.

Contoh

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

Penggunaan

  • name adalah nama SF Symbols, bukan berkas. fontSize mengukur simbol, width/height wadahnya. paletteColors mewarnai lapisan. Simbol yang tidak tersedia tidak berubah menjadi gambar.
  • Ukuran angka memakai poin. auto mengukur isi; fill memakai alokasi induk. Tentukan ukuran wadah dahulu; fill atau teks panjang tidak memperbesar induk tetap.

Properti

namestring

Nama SF Symbols seperti speedometer; ketersediaan bergantung OS.

Contoh"location.north.fill"
fontSize?number

Ukuran font dalam poin.

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

Ketebalan font ultraLight hingga black; regular normal.

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

Ukuran relatif small, medium atau large bersama fontSize.

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

monochrome satu warna, hierarchical gradasi nada, palette memakai paletteColors, multicolor mempertahankan warna asli.

Contoh"monochrome"
color?Paint

Warna gambar, termasuk warna HDR.

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

Satu hingga tiga warna untuk lapisan simbol dalam mode palette.

Contoh["red", "blue"]
contentAnimation?ContentAnimation

Transisi perubahan isi. Pilih type yang didukung; duration/delay dalam detik.

Contoh{type: "fade", duration: 0.25}
Properti umum
width?number | "auto" | "fill"

Lebar dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh100
height?number | "auto" | "fill"

Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh80
padding?number

Padding konten dalam poin.

Contoh0
x?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
y?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
transform?ViewTransform

Transformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.

Contoh{rotation: 0}
background?Paint

Warna atau gradasi latar; clear berarti transparan.

Contoh"clear"
opacity?number

Opasitas seluruh View: 0 transparan, 1 buram.

Contoh1
cornerRadius?number

Radius sudut dalam poin.

Contoh0
clipped?boolean

Potong gambar yang melewati batas View.

Contohfalse
clip?"rectangle" | "ellipse"

Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.

Contoh"rectangle"
mask?View | null

View masker alfa. Di tengah tanpa memengaruhi tata letak; null menonaktifkan masker.

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

Urutan gambar antar saudara; nilai lebih besar di depan.

Contoh0
blur?number

Radius buram dalam poin; 0 menonaktifkan.

Contoh4
innerShadow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

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

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

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

Warna bayangan luar.

ContohHDR("black")
shadowOpacity?number

Opasitas bayangan 0–1; 0 menyembunyikannya.

Contoh0
shadowRadius?number

Radius buram bayangan luar dalam poin.

Contoh4
shadowX?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh0
shadowY?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh2
animations?Animation[]

Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.

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

Identitas stabil di antara elemen sejajar.

Contoh praktis

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

Animasi

Animasi

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

Jika dihilangkan

Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.

PropertiJika dihilangkan
fontSize14
fontWeight"regular"
imageScale"medium"
renderingMode"monochrome"
colorHDR($env.foreground)

Text

HStack

Color / Gradient

CardContent

Sebelumnya

RepeatedLayout

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait