CapDrive
دليل الاستخدام

Material

ارسم سطح مادة الزجاج المصنفر، والتي يمكن أن تتداخل مع النص والرسومات لتكوين منطقة محتوى. type يدعم حاليا التجميد، style يتحكم في سمك المادة؛ يعتمد التأثير المرئي على المحتوى الذي يقف خلفه.

مثال

function main() {
  return (
    <ZStack>
      <Material type="frosted" style="thin" />
      <Text>CapDrive</Text>
    </ZStack>
  );
}

الاستخدام

  • Material سطح بلا children أو padding. ضع النص فوقه بـ ZStack؛ الزجاج يعتمد على ما خلفه. type يدعم frosted حاليًا وstyle للسماكة، لا لصور خامة.
  • mask يستخدم ألفا: المعتم يُظهر والشفاف يُخفي. الأسود والأبيض بألفا متساوية متماثلان. لا يغير التخطيط؛ حدّد أبعاده وميّزه عن clipped.

الخصائص

type"frosted"

نوع المادة؛ frosted هو الزجاج المصنفر الأصلي المدعوم حالياً.

مثال"frosted"
style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"

مظهر المادة من ultraThin إلى ultraThick؛ bar لمادة شريط النظام.

مثال"ultraThin"
الخصائص المشتركة
width?number | "auto" | "fill"

العرض بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال100
height?number | "auto" | "fill"

الارتفاع بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال80
x?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
y?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
transform?ViewTransform

تحويل View كله دون تغيير التخطيط. الإزاحة بالنقاط، الدوران والميل بالدرجات، المقياس 1 بلا تغيير، والمرساة 0–1.

مثال{rotation: 0}
background?Paint

لون أو تدرج للخلفية؛ clear يجعلها شفافة.

مثال"clear"
opacity?number

عتامة View بالكامل: 0 شفاف و1 معتم.

مثال1
cornerRadius?number

نصف قطر الزوايا بالنقاط.

مثال0
clipped?boolean

قص الرسم الذي يتجاوز حدود View.

مثالfalse
clip?boolean | "rectangle" | "ellipse"

شكل القص rectangle أو ellipse؛ يقبل Material أيضاً false لتعطيله.

مثال"rectangle"
mask?View | null

عرض قناع ألفا. يتم توسيطه دون التأثير على التخطيط؛ تعطل null القناع.

مثال<Circle width="fill" height="fill" background="white"/>
zIndex?number

ترتيب الرسم بين العناصر الشقيقة؛ القيم الأكبر في الأمام.

مثال0
blur?number

نصف قطر التمويه بالنقاط؛ 0 يعطّله.

مثال4
innerShadow?DrawingEffect

لون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.

مثال{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

لون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.

مثال{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

لون الظل الخارجي.

مثالHDR("black")
shadowOpacity?number

عتامة الظل من 0 إلى 1؛ 0 يخفيه.

مثال0
shadowRadius?number

نصف قطر تمويه الظل الخارجي بالنقاط.

مثال4
shadowX?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال0
shadowY?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال2
animations?Animation[]

تحريك تغير الخاصية. duration/delay بالثواني، from/to للنهايات، repeat/autoreverse للتكرار وwrap للدورة.

مثال[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

معرّف ثابت بين العناصر الشقيقة.

مثال عملي

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>
  );
}

الحركة

الحركة

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

عند الإغفال

الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.

الخصائصعند الإغفال
type"frosted"
style"ultraThin"

ZStack

Image

ZStack

السابق

CardContent

الخطوة التالية

في هذه الصفحة

مثالالاستخدامالخصائصمثال عمليالحركةعند الإغفالواجهات مرتبطة