الانتقال إلى المحتوى الرئيسي

نظرة عامة

يوفر 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 عندما يحتاج النص إلى عنصر دلالي آخر:
يؤثر الاقتطاع في العرض المرئي؛ ولا يختصر النص في DOM. وفّر طريقة لقراءة المحتوى الكامل عندما يكون الجزء المرئي غير كافٍ.

الخصائص

تستهدف السمات الأصلية والعناصر التابعة والمراجع وأسماء الفئات والأنماط عنصر النص المعروض. يتم تصدير 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 }}. تستمر الأنماط والأصناف الحالية وتركيب العرض في استهداف عنصر النص.