CapDriveHStack
Susun subtitle View dari kiri ke kanan, cocok untuk kombinasi horizontal ikon dan angka, angka dan satuan, dll. spacing mengatur jarak yang berdekatan, alignment mengatur perataan garis dasar atas dan bawah atau teks dalam baris ini.
Contoh
function main() {
return (
<HStack spacing={12} alignment="center">
<Symbol name="speedometer" />
<Text fontSize={32}>78</Text>
</HStack>
);
}
Penggunaan
- alignment mengatur vertikal atau garis dasar teks dalam baris, bukan posisi horizontal seluruh baris. Spacer memisahkan ujung; firstTextBaseline menyelaraskan angka besar dan unit kecil.
- 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?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"Perataan vertikal dalam baris: top, center, bottom atau garis dasar teks pertama/terakhir.
"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 (
<HStack width={260} alignment="firstTextBaseline" spacing={4}>
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
<Spacer minLength={12} />
<Symbol name="speedometer" fontSize={24} />
</HStack>
);
}
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.