CapDrive
Panduan penggunaan

Text

Menampilkan bacaan, unit atau teks deskriptif. Font, ukuran font, perataan, pembungkusan garis, dan pemotongan dapat diatur; konten diubah secara seragam menjadi string, dan nilai kosong ditampilkan sebagai kosong.

Contoh

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

Penggunaan

  • Isi dikonversi dengan toString(); null/undefined kosong. Gabungkan ikon melalui HStack, bukan View di dalam Text. Batasi width sebelum lineLimit/truncationMode. minimumScaleFactor=1 tidak mengecilkan.
  • Ukuran angka memakai poin. auto mengukur isi; fill memakai alokasi induk. Tentukan ukuran wadah dahulu; fill atau teks panjang tidak memperbesar induk tetap.

Properti

children?TextContent | TextContent[]

Konten gambar anak.

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"
font?"default" | "rounded" | "monospaced" | "serif"

Desain font: default, rounded, monospaced atau serif.

Contoh"default"
color?Paint

Warna gambar, termasuk warna HDR.

ContohHDR($env.foreground)
alignment?"leading" | "center" | "trailing"

Perataan teks dalam lebar tersedia: leading, center atau trailing.

Contoh"leading"
lineLimit?number | null

Jumlah baris maksimum; null atau dihilangkan mengizinkan pembungkusan tanpa batas baris.

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

Bagian teks yang dipotong jika tidak muat: head, middle atau tail.

Contoh"tail"
minimumScaleFactor?number

Skala teks minimum saat ruang terbatas: 0.01–1; 1 tidak mengecilkan.

Contoh0.5
monospacedDigits?boolean

Lebar digit sama agar perubahan angka tidak menggeser posisi mendatar.

Contohtrue
letterSpacing?number

Tambahan jarak karakter dalam poin.

Contoh0
contentAnimation?ContentAnimation

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

Contoh{type: "numericText"}
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 (
    <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>
  );
}

Animasi

Animasi

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizeletterSpacingminimumScaleFactorcolortransform.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"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

Sebelumnya

Image

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait