نظرة عامة
Section.Root يجمع المحتوى ذي الصلة. يجمع Section.Header بين العنوان ووصف ومحتوى actions اختياري. الأوصاف هي نص عادي مرتبط بالعنوان، لذا لا تضيف مستويات إلى مخطط المستند.
استخدام
أضف وصفًا وإجراءً
Section.Root افتراضيًا عنصر div بعرض كامل مع محاذاة إلى اليسار ولون النص الأساسي. استخدم align وcolor وfullWidth لضبط حاوية المحتوى.
يمكن أيضًا استخدام Section.Header بمفرده. تضبط قيم level وsize وcolor العنوان، وتكون افتراضيًا 2 وmd وprimary. يحتوي الرأس على هامش واحد بمسافة 4 بعده. استخدم style أو className الأصلي لضبط تلك المسافة.
تجاوز سعة الوصف
تعرض أوصاف السلاسل النصية ما يصل إلى خمسة أسطر. عيّنdescriptionLineClamp إلى عدد صحيح موجب لاختيار حد آخر، أو إلى false لعرض الوصف الكامل دون تلميح أداة للفيض. يكشف التمرير فوقه النص الفائض. لا تضيف الأوصاف نقطة توقف Tab افتراضيا؛ عيّن isDescriptionFocusable لتمكين الوصول عبر التركيز إلى تلميح الأداة. يؤدي Escape إلى إخفاء تلميح الأداة.
يقبل العنوان محتوى عقدة. اختر level للمخطط التفصيلي للمستند بشكل مستقل عن size وcolor المرئيين. أنشئ الروابط والمحتوى المنسق الآخر صراحةً في وصف العقدة.
مرّر عقدة React للحصول على محتوى داعم أكثر ثراءً. تُعرض الأوصاف الغنية كما تم توفيرها، من دون اقتطاع تلقائي أو تلميحات.
التركيب
يمرّر كلا الجزأين السمات الأصلية والمراجع وأسماء الفئات والأنماط وrender إلى عنصرهما الخارجي. على سبيل المثال، يوفّر Section.Root render={<section aria-label="Workspace settings" />} قسمًا مسمّى، ويستخدم Section.Header render={<header />} حاوية رأس.
عند الترحيل، استبدل adornment بـ actions. فعّل تركيز الوصف باستخدام isDescriptionFocusable عند الحاجة. يتم تصدير SectionRootProps وSectionHeaderProps من twenty-ui/components/layout.
الإزاحة
Section.Root
"center" | "left"
افتراضي:"left"
Text alignment within the section. Defaults to
left."primary" | "secondary" | "tertiary"
افتراضي:"primary"
Text color within the section. Defaults to
primary.boolean
افتراضي:"true"
Whether the section fills the available width. Defaults to
true.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.Section.Header
ReactNode
Content alongside the heading, such as an action button or status.
"primary" | "secondary" | "tertiary"
افتراضي:"primary"
Theme font color. Defaults to
primary.ReactNode
Supporting text associated with the heading. Strings have optional truncation and overflow tooltips; React nodes render as supplied.
number | false
افتراضي:"5"
Maximum visible lines for a string description. Defaults to
5; use false to display the full description without a tooltip.boolean
افتراضي:"false"
Adds a tab stop to a truncated string description so its overflow tooltip can open on focus. Defaults to
false.1 | 2 | 3 | 4 | 5 | 6
افتراضي:"2"
Semantic heading level, from
h1 through h6. Does not change the visual size. Defaults to 2.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."lg" | "md" | "sm" | "xl" | "xs" | "xxl"
افتراضي:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.ReactNode
مطلوب
Content of the section heading.