لقطات الشاشة

يعرض مكوّن Screenshot الصور المدركة للسمة التي تتبدّل تلقائياً بين المتغيرات الفاتحة والداكنة عندما يقوم المستخدم بتبديل سمة الموقع. استخدمه كلما احتجت إلى عرض لقطات شاشة لواجهة المستخدم ينبغي أن تتطابق مع نظام الألوان الحالي للقارئ.

مرجع الخصائص

الخاصية	النوع	مطلوب	الوصف
light	string	لا	المسار إلى صورة وضع الإضاءة
dark	string	لا	المسار إلى صورة الوضع الداكن
alt	string	نعم	النص البديل لإمكانية الوصول
width	number	لا	عرض الصورة بالبكسل
height	number	لا	ارتفاع الصورة بالبكسل

ملاحظة

يجب توفير light أو dark على الأقل إحداهما. عند توفير كليهما، يتبادل المكوّن بينهما بناءً على السمة النشطة.

الوضع المزدوج (فاتح + داكن)

وفّر كلاً من خاصيتَي light وdark لعرض المتغير الصحيح لكل سمة. قم بتبديل محدد السمة في الزاوية العلوية اليمنى لمشاهدة تبادل الصورة.

import Screenshot from '@f5-sales-demo/docs-theme/components/Screenshot.astro';

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage"
/>

نصيحة

احرص دائماً على التقاط لقطات شاشة بالوضعين الفاتح والداكن عند توثيق واجهة المستخدم. يمنح ذلك القراء تمثيلاً دقيقاً بصرف النظر عن تفضيلاتهم للسمة.

صورة واحدة

عند توفر متغير واحد فقط، مرّر light أو dark فحسب. تُعرض الصورة في كلتا السمتين دون تبادل.

<Screenshot
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage (dark only)"
/>

مع الأبعاد

استخدم width وheight للتحكم في الحجم المعروض ومنع الإزاحة في التخطيط.

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage at fixed width"
  width={600}
  height={338}
/>

آلية العمل

يعرض المكوّن عنصراً أو عنصرَي <img> داخل غلاف .screenshot-pair. تتحكم قواعد CSS في الرؤية بناءً على السمة النشطة:

• الوضع الداكن (الافتراضي) — تُخفى صورة .screenshot-light عبر :root:not([data-theme="light"]) .screenshot-light \{ display: none \}
• وضع الإضاءة — تُخفى صورة .screenshot-dark عبر :root[data-theme="light"] .screenshot-dark \{ display: none \}

تعالج المحددات الإضافية غلاف starlight-image-zoom باستخدام :has() بحيث تعمل وظيفة التكبير بشكل صحيح مع كلا المتغيرين.

تحصل جميع صور لقطات الشاشة على تنسيق متسق: حدود خفية، وزوايا مدوّرة، وظل يتكثّف عند التمرير فوقه.

المقارنة مع صور Markdown

الميزة	مكوّن Screenshot	صورة Markdown 
التبادل المدرك للسمة	نعم	لا
حدود وظلال منسّقة	تلقائي	لا
تأثير الظل عند التمرير	نعم	لا
دعم التكبير	يعمل مع إضافة تكبير الصور	يعمل مع إضافة تكبير الصور
النص البديل	خاصية alt	![نص بديل]()

استخدم مكوّن Screenshot عندما يكون لديك متغيرات صور خاصة بالسمة أو تريد مظهر لقطة الشاشة المنسّقة. استخدم صور Markdown القياسية للرسومات المضمّنة أو المخططات أو الصور التي تبدو متشابهة في كلتا السمتين.