CapDriveMaterial
Gambarlah permukaan bahan kaca buram, yang dapat ditindih dengan teks dan grafik untuk membentuk area konten. type saat ini mendukung buram, style mengontrol ketebalan material; efek yang terlihat tergantung pada konten di baliknya.
Contoh
function main() {
return (
<ZStack>
<Material type="frosted" style="thin" />
<Text>CapDrive</Text>
</ZStack>
);
}
Penggunaan
- Material adalah permukaan tanpa children dan padding. Tumpuk teks dengan ZStack; kaca bergantung isi di belakang. type saat ini frosted, style ketebalan, bukan tekstur gambar.
- mask memakai alfa: opak menampilkan, transparan menyembunyikan. Hitam dan putih dengan alfa sama identik. Tidak memengaruhi layout; beri ukuran dan bedakan dari clipped.
Properti
type"frosted"Jenis material; saat ini frosted menggambar kaca buram bawaan.
"frosted"style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"Tampilan ultraThin hingga ultraThick; bar memakai material bilah sistem.
"ultraThin"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.
80x?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?boolean | "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 (
<ZStack width={200} height={100}>
<HStack spacing={0} width="fill" height="fill">
<Rectangle width="fill" height="fill" background="blue" />
<Rectangle width="fill" height="fill" background="orange" />
</HStack>
<Material
width={160}
height={64}
type="frosted"
style="thin"
cornerRadius={16}
/>
<Text fontSize={28}>78 km/h</Text>
</ZStack>
);
}
Animasi
widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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.