CapDriveSpacer
Alokasikan sisa ruang di Tumpukan untuk mendorong konten di kedua sisi atau memberikan jarak elastis untuk konten. minLength menetapkan panjang minimum, width atau height eksplisit dapat memperbaiki ukuran ke arah yang sesuai.
Contoh
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Penggunaan
- Spacer tidak menggambar. Mengambil sisa horizontal di HStack atau vertikal di VStack; minLength batas bawah. width/height eksplisit menetapkan sumbu. Tanpa latar, opasitas atau efek.
- Ukuran angka memakai poin. auto mengukur isi; fill memakai alokasi induk. Tentukan ukuran wadah dahulu; fill atau teks panjang tidak memperbesar induk tetap.
Properti
minLength?numberRuang fleksibel minimum pada sumbu utama Stack induk, dalam poin.
0Properti umum
width?number | "auto" | "fill"Lebar dalam poin, ukuran otomatis, atau memenuhi induk.
"auto"height?number | "auto" | "fill"Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.
"auto"animations?SpacerAnimation[]Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentitas stabil di antara elemen sejajar.
""Contoh praktis
function main() {
return (
<VStack spacing={16}>
<HStack width={240}>
<Text>A</Text>
<Spacer minLength={20} />
<Text>B</Text>
</HStack>
<HStack width={240}>
<Text>A</Text>
<Spacer width={20} />
<Text>B</Text>
</HStack>
</VStack>
);
}
Animasi
widthheightminLengthJika dihilangkan
Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.
| Properti | Jika dihilangkan |
|---|---|
minLength | 0 |