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

Text

عرض القراءة أو الوحدات أو النص الوصفي. يمكن ضبط الخط وحجم الخط والمحاذاة والتفاف الخط واقتطاعه؛ يتم تحويل المحتوى بشكل موحد إلى سلسلة، ويتم عرض القيم الفارغة على أنها فارغة.

مثال

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

الاستخدام

  • يحوّل المحتوى عبر toString() وتظهر null/undefined فارغة. اجمع الرمز والنص بـ HStack ولا تضع View داخل Text. قيّد width قبل lineLimit/truncationMode. القيمة minimumScaleFactor=1 تمنع التصغير.
  • الأبعاد الرقمية بالنقاط. auto يقيس المحتوى وfill يستخدم المساحة المخصصة من الأب. حدّد حجم الحاوية أولًا؛ fill والنص الطويل لا يوسّعان أبًا ثابتًا.

الخصائص

children?TextContent | TextContent[]

محتوى الرسم الفرعي.

fontSize?number

حجم الخط بالنقاط.

مثال14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

وزن الخط من ultraLight إلى black؛ regular هو العادي.

مثال"regular"
font?"default" | "rounded" | "monospaced" | "serif"

تصميم الخط: default أو rounded أو monospaced أو serif.

مثال"default"
color?Paint

لون الرسم، بما في ذلك ألوان HDR.

مثالHDR($env.foreground)
alignment?"leading" | "center" | "trailing"

محاذاة النص ضمن العرض المتاح: leading أو center أو trailing.

مثال"leading"
lineLimit?number | null

أقصى عدد أسطر؛ null أو الحذف يسمح بالتفاف دون حد لعدد الأسطر.

مثال1
truncationMode?"head" | "middle" | "tail"

موضع النص المحذوف عند عدم الاتساع: head أو middle أو tail.

مثال"tail"
minimumScaleFactor?number

أقل مقياس للنص عند ضيق المكان: 0.01–1؛ 1 يمنع التصغير.

مثال0.5
monospacedDigits?boolean

أرقام متساوية العرض لتجنب القفز الأفقي عند تغير القيمة.

مثالtrue
letterSpacing?number

مسافة إضافية بين الأحرف بالنقاط.

مثال0
contentAnimation?ContentAnimation

انتقال عند تغير المحتوى. اختر type المدعوم؛ duration/delay بالثواني.

مثال{type: "numericText"}
الخصائص المشتركة
width?number | "auto" | "fill"

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

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

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

مثال80
padding?number

المساحة الداخلية للمحتوى بالنقاط.

مثال0
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?"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 (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

الحركة

الحركة

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

عند الإغفال

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

الخصائصعند الإغفال
fontSize14
fontWeight"regular"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

السابق

Image

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

في هذه الصفحة

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