CapDriveVStack
Susun subtitle View dari atas ke bawah, sesuai dengan kombinasi vertikal judul, nomor induk dan satuan. spacing mengatur jarak yang berdekatan, dan alignment mengatur perataan kiri dan kanan dalam kolom ini.
Contoh
function main() {
return (
<VStack spacing={8} alignment="leading">
<Text fontSize={32}>78</Text>
<Text>km/h</Text>
</VStack>
);
}
Penggunaan
- alignment mengatur horizontal dalam kolom: leading kiri, trailing kanan. Spacer menyediakan ruang vertikal lentur; spacing berlaku di antara anak bersebelahan.
- Ukuran angka memakai poin. auto mengukur isi; fill memakai alokasi induk. Tentukan ukuran wadah dahulu; fill atau teks panjang tidak memperbesar induk tetap.
- x/y dan transform diterapkan setelah layout. Memindah anak tidak mendorong saudara; gunakan spacing atau Spacer. Rotasi dan skala memengaruhi seluruh gambar.
Properti
children?ViewContentKonten gambar anak.
spacing?numberJarak antartampilan anak dalam poin.
8alignment?"leading" | "center" | "trailing"Perataan horizontal dalam kolom: leading, center atau trailing.
"center"Properti umum
width?number | "auto" | "fill"Lebar dalam poin, ukuran otomatis, atau memenuhi induk.
100height?number | "auto" | "fill"Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.
80padding?numberPadding konten dalam poin.
0x?numberOffset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.
0y?numberOffset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.
0transform?ViewTransformTransformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.
{rotation: 0}background?PaintWarna atau gradasi latar; clear berarti transparan.
"clear"opacity?numberOpasitas seluruh View: 0 transparan, 1 buram.
1cornerRadius?numberRadius sudut dalam poin.
0clipped?booleanPotong gambar yang melewati batas View.
falseclip?"rectangle" | "ellipse"Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.
"rectangle"mask?View | nullView masker alfa. Di tengah tanpa memengaruhi tata letak; null menonaktifkan masker.
<Circle width="fill" height="fill" background="white"/>zIndex?numberUrutan gambar antar saudara; nilai lebih besar di depan.
0blur?numberRadius buram dalam poin; 0 menonaktifkan.
4innerShadow?DrawingEffectWarna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectWarna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorWarna bayangan luar.
HDR("black")shadowOpacity?numberOpasitas bayangan 0–1; 0 menyembunyikannya.
0shadowRadius?numberRadius buram bayangan luar dalam poin.
4shadowX?numberOffset bayangan dalam poin: x ke kanan, y ke bawah.
0shadowY?numberOffset bayangan dalam poin: x ke kanan, y ke bawah.
2animations?Animation[]Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentitas stabil di antara elemen sejajar.
Contoh praktis
function main() {
return (
<VStack width={180} height={140} alignment="leading" spacing={8}>
<Text fontSize={14}>Speed</Text>
<Spacer minLength={8} />
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
</VStack>
);
}
Animasi
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYJika dihilangkan
Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.