نظرة عامة
يوفرText تنسيق الطباعة ومعالجة التجاوز. يعرض عنصر div افتراضيًا. احذف size وweight وcolor لمواصلة وراثة تنسيق الطباعة من محيطه.
استخدام
امنح النص عرضًا مقيّدًا، ثم اضبطtruncate لعرض علامة حذف عند تجاوزه:
اختر تنسيق الطباعة
يستخدمsize مقياس السمة الحالي. يغيّر حجم الخط، دون قيمة افتراضية للارتفاع أو font-family أو line-height:
يقبل
weight القيم regular (400) أو medium (500) أو semibold (600). يقبل color القيم primary وsecondary وtertiary أو light. يرث كل prop مُهمَل بشكل مستقل. لا يغيّر الحجم المرئي العنصر الدلالي.
للتسميات التوضيحية، اجمع بين الحجم الصغير ووزن semibold واللون light:
style الأصلي لألوان وقت التشغيل وقيود تخطيط العنصر الأب. تستهدف أصناف المستدعي وتركيب العرض عنصر النص نفسه. لا يضيف Text أي قيم افتراضية للطباعة عند إهمال هذه الخصائص.
تحديد عدد الأسطر
استخدمlineClamp مع عدد صحيح موجب. اختر إما truncate أو lineClamp؛ فخصائصهما متنافية.
اختر عنصرًا
استخدمrender عندما يحتاج النص إلى عنصر دلالي آخر:
الخصائص
تستهدف السمات الأصلية والعناصر التابعة والمراجع وأسماء الفئات والأنماط عنصر النص المعروض. يتم تصديرTextProps من twenty-ui/primitives/typography. يتم عرض محتوى النص دون تغيير، بما في ذلك الروابط التي يوفرها المستدعي.
"light" | "primary" | "secondary" | "tertiary"
Semantic text color. Omitted values inherit; native style supports runtime colors.
number
Positive integer limiting the number of visible lines. Cannot be combined with
truncate.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the default div. Native props and the ref target the rendered text element.
"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxs"
Font size from the theme scale. Omitted values inherit; this does not set height.
boolean
Truncates one line with an ellipsis. Cannot be combined with
lineClamp."medium" | "regular" | "semibold"
Theme font weight. Omitted values inherit.
الترحيل
يختارcolor الآن لون سمة دلاليًا. انقل قيم ألوان CSS الاعتباطية من سمة color الأصلية إلى style={{ color: customColor }}. تستمر الأنماط والأصناف الحالية وتركيب العرض في استهداف عنصر النص.