ภาพหน้าจอ

ส่วนประกอบ Screenshot แสดงผลรูปภาพที่รองรับธีม โดยสลับระหว่างรูปแบบสว่างและมืดโดยอัตโนมัติ เมื่อผู้ใช้เปลี่ยนธีมของไซต์ ใช้งานเมื่อต้องการแสดงภาพหน้าจอ UI ที่ควรตรงกับ ชุดสีปัจจุบันของผู้อ่าน

อ้างอิง Props

Prop	Type	Required	คำอธิบาย
light	string	No	พาธไปยังรูปภาพโหมดสว่าง
dark	string	No	พาธไปยังรูปภาพโหมดมืด
alt	string	Yes	ข้อความ Alt สำหรับการเข้าถึง
width	number	No	ความกว้างของรูปภาพในหน่วยพิกเซล
height	number	No	ความสูงของรูปภาพในหน่วยพิกเซล

หมายเหตุ

ต้องระบุอย่างน้อยหนึ่งในสองคือ light หรือ dark เมื่อระบุทั้งคู่ ส่วนประกอบจะสลับระหว่างกันตามธีมที่ใช้งานอยู่

โหมดคู่ (สว่าง + มืด)

ระบุทั้ง props 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"
/>

เคล็ดลับ

ควรบันทึกภาพหน้าจอทั้งโหมดสว่างและโหมดมืดเสมอเมื่อจัดทำเอกสาร UI สิ่งนี้ให้การแสดงผลที่ถูกต้องแก่ผู้อ่านโดยไม่คำนึงถึงการตั้งค่าธีมของพวกเขา

รูปภาพเดียว

เมื่อมีเพียงรูปแบบเดียว ให้ส่งเฉพาะ 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 
การสลับตามธีม	ใช่	ไม่
เส้นขอบและเงาแบบมีสไตล์	อัตโนมัติ	ไม่
เอฟเฟกต์เงาเมื่อ Hover	ใช่	ไม่
รองรับการซูม	ทำงานร่วมกับปลั๊กอิน image zoom	ทำงานร่วมกับปลั๊กอิน image zoom
ข้อความ Alt	alt prop	![alt text]()

ใช้ส่วนประกอบ Screenshot เมื่อมีรูปแบบรูปภาพที่เฉพาะเจาะจงกับธีม หรือ ต้องการลักษณะภาพหน้าจอแบบมีสไตล์ ใช้รูปภาพ Markdown มาตรฐานสำหรับกราฟิกอินไลน์ ไดอะแกรม หรือรูปภาพที่ดูเหมือนกันในทั้งสองธีม