CapDrive
Panduan penggunaan

Rectangle

Menggambar persegi panjang dengan sudut membulat opsional untuk digunakan dengan latar belakang, bilah kemajuan, dan batas. background mengisi bagian dalam, stroke guratan, lineWidth dan strokePosition mengontrol lebar dan posisi guratan.

Contoh

function main() {
  return (
    <Rectangle
      width={160}
      height={80}
      cornerRadius={16}
      background={LinearGradient(['#A9E56F', '#30B3A2'])}
      stroke={$env.foreground}
      lineWidth={2}
      strokePosition="inside"
    />
  );
}

Penggunaan

  • background mengisi, stroke membuat garis tepi. cornerRadius paling besar setengah sisi pendek. inside di dalam, center melintasi batas, outside di luar; induk dapat memotong garis luar.
  • mask memakai alfa: opak menampilkan, transparan menyembunyikan. Hitam dan putih dengan alfa sama identik. Tidak memengaruhi layout; beri ukuran dan bedakan dari clipped.
  • background/stroke menerima Color atau Gradient. Gunakan tiga konstruktor Gradient: posisi warna/pusat 0–1, radius dalam poin. HDR membungkus satu warna; kecerahan bergantung perangkat dan tampilan.

Properti

background?Paint

Warna atau gradasi latar; clear berarti transparan.

ContohHDR($env.dark ? "white" : "black")
cornerRadius?number

Radius sudut dalam poin.

Contoh0
stroke?Paint

Warna atau gradasi garis; clear menyembunyikannya.

Contoh"clear"
lineWidth?number

Ketebalan garis dalam poin; 0 tidak menggambar garis.

Contoh2
strokePosition?"inside" | "center" | "outside"

Letak garis terhadap kontur: inside, center atau outside.

Contoh"inside"
lineCap?"round" | "butt" | "square"

Ujung garis: butt memotong, square memanjang persegi, round membulat.

Contoh"round"
lineJoin?"round" | "miter" | "bevel"

Bentuk sambungan garis: miter, round atau bevel.

Contoh"round"
dash?number[]

Panjang garis dan celah bergantian dalam poin; larik kosong membuat garis utuh.

Contoh[]
dashPhase?number

Offset pola putus-putus dalam poin.

Contoh0
trimStart?number

Bagian jalur terlihat trimStart–trimEnd dalam 0–1. Circle/Ellipse/Arc memakai sudut.

Contoh0
trimEnd?number

Bagian jalur terlihat trimStart–trimEnd dalam 0–1. Circle/Ellipse/Arc memakai sudut.

Contoh1
Properti umum
width?number | "auto" | "fill"

Lebar dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh"fill"
height?number | "auto" | "fill"

Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh"fill"
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}
opacity?number

Opasitas seluruh View: 0 transparan, 1 buram.

Contoh1
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 spacing={20}>
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="inside"
      />
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="outside"
      />
    </HStack>
  );
}

Animasi

Animasi

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
cornerRadius0
lineWidth2
strokePosition"inside"
trimStart0
trimEnd1
backgroundHDR($env.dark ? 'white' : 'black')

Color / Gradient

ZStack

Ellipse

Sebelumnya

Line

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait