اقتباس
Quoteاقتباس بارز في React: عنوان اختياري، مؤلف، صفة المؤلف، صورة رمزية، أحجام، وتلوينات. يعرض عنصر blockquote الدلالي.
يستقبل Quote نص الاقتباس عبر children، مع خيارات quoteTitle، author، authorTitle، وavatar. يعرض المكون عنصر blockquote الدلالي.
متى تستخدمه
استخدم Quote للشهادات، تصريح قيادي في صفحة خدمة، أو مقتطف بارز من سياسة. أبق الاقتباسات قصيرة وانسبها إلى قائلها.
لإبراز تنبيه غير مقتبس، استخدم InlineAlert.
أمثلة
النظام المصمم جيداً هو ما لا تضطر أبداً للتفكير فيه.
الخصائص
الخصائص التي يعرفها Quote. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "lg" | ||
whiteBackground | boolean | ||
children | react.ReactNode | The quote text - the cited sentence. Rendered inside the <blockquote>. | |
quoteTitle | react.ReactNode | Optional bold lead-in above the quote (SDGA "Title of quote" - Display xs). | |
author | react.ReactNode | Attribution name (SDGA "Author's name" - Text xl, medium). | |
authorTitle | react.ReactNode | Secondary attribution line - role / brief (SDGA author title - Text lg). | |
avatar | react.ReactNode | Avatar media (e.g. an <Avatar />), shown 80px at the inline-start of the author row.
Decorative (aria-hidden); only rendered alongside textual attribution. | |
cite | string | Source URL - set as the machine-readable cite= attribute on the <blockquote>. |
إمكانية الوصول
يعرض Quote عنصر <blockquote> الأصلي، لذلك يعلنه قارئ الشاشة اقتباساً. يظهر المؤلف وصفته نصاً، والصورة الرمزية زخرفية.
تحمل علامات الاقتباس الزخرفية aria-hidden.