نظرة عامة
يعرضHeading عنصر h2 افتراضياً. استخدم children للمحتوى، وlevel لبنية المستند، وsize للمظهر.
استخدام
اختر المستويات وفق ترتيب المستند. لا يغيّر الحجم المرئي الأصغر المستوى الذي تعلنه التقنية المساعدة.xs وsm وmd وlg وxl وxxl رموز الخط المطابقة. تستخدم الأحجام الأكبر 1.54rem و1.85rem على التوالي. تحافظ جميع الأحجام على وزن شبه عريض وارتفاع سطر قدره 1.1. يقبل Section.Header وDialog.Title قيم الأحجام نفسها. لا تحتوي العناوين على هامش خارجي؛ إذ يتولى التخطيط المحيط بها المسافات.
اللون والتكوين
استخدمcolor="secondary" للعناوين الأقل بروزاً. يتوفر tertiary أيضاً، لكن تباينه يعتمد على حجم الخط والسمة والخلفية. تحقق من سهولة القراءة عند استخدامه.
تُمرَّر السمات الأصلية والأنماط وأسماء الفئات والمراجع إلى العنوان. استخدم render للتركيب باستخدام عنصر أو مكوّن مخصص؛ ويتحمل ذلك العنصر مسؤولية الحفاظ على دلالات العنوان.
للعنوان الذي يتضمن نصًا داعمًا أو إجراءات، استخدم Section.
الإزاحة
"primary" | "secondary" | "tertiary"
افتراضي:"primary"
Theme font color. Defaults to
primary.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.