CapDriveMaterial
İçerik alanı oluşturmak için metin ve grafiklerle üst üste gelebilecek buzlu cam malzemenin yüzeyini çizin. type şu anda frosted'ı destekliyor, style malzeme kalınlığını kontrol ediyor; görünür etki, arkasındaki içeriğe bağlıdır.
Örnek
function main() {
return (
<ZStack>
<Material type="frosted" style="thin" />
<Text>CapDrive</Text>
</ZStack>
);
}
Kullanım
- Material children ve padding olmayan yüzeydir. ZStack ile metin ekleyin; buzlu görünüm arka içeriğe bağlıdır. type şu an frosted, style kalınlıktır; resim dokusu desteklenmez.
- mask alfa kullanır: opak gösterir, saydam gizler. Aynı alfa ile siyah ve beyaz eşittir. Yerleşimi etkilemez; boyut verin ve clipped kırpmasından ayırın.
Özellikler
type"frosted"Malzeme türü; şu anda frosted yerel buzlu cam çizer.
"frosted"style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"ultraThin–ultraThick görünümü; bar sistem çubuğu malzemesidir.
"ultraThin"Ortak özellikler
width?number | "auto" | "fill"Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.
100height?number | "auto" | "fill"Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.
80x?numberGörsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.
0y?numberGörsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.
0transform?ViewTransformYerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.
{rotation: 0}background?PaintArka plan rengi veya gradyanı; clear saydamdır.
"clear"opacity?numberTüm View opaklığı: 0 saydam, 1 opak.
1cornerRadius?numberKöşe yarıçapı, punto.
0clipped?booleanView sınırlarını aşan çizimi kırpar.
falseclip?boolean | "rectangle" | "ellipse"Kırpma şekli rectangle veya ellipse; Material için false kapatır.
"rectangle"mask?View | nullAlfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.
<Circle width="fill" height="fill" background="white"/>zIndex?numberKardeşler arasında çizim sırası; büyük değer öndedir.
0blur?numberBulanıklık yarıçapı, punto; 0 kapatır.
4innerShadow?DrawingEffectEfekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectEfekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorDış gölge rengi.
HDR("black")shadowOpacity?numberGölge opaklığı 0–1; 0 gizler.
0shadowRadius?numberDış gölge bulanıklık yarıçapı, punto.
4shadowX?numberGölge kayması, punto: x sağa, y aşağı.
0shadowY?numberGölge kayması, punto: x sağa, y aşağı.
2animations?Animation[]Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberKardeş öğeler arasında kararlı kimlik.
Pratik örnek
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>
);
}
Animasyon
widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYAtlandığında
Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.