اقتباس
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.