เงาสี่เหลี่ยม

คลาสยูทิลิตี้เหล่านี้ให้เอฟเฟกต์เงาตกที่สม่ำเสมอสำหรับองค์ประกอบต่างๆ ใช้เพื่อเพิ่มความลึกและลำดับชั้นทางภาพให้กับ UI ของคุณ

การใช้งาน

เงาตก

ชื่อคลาส	คำอธิบาย	คลาสพื้นฐาน
.spr-drop-shadow-sm	เงาตกเล็กสำหรับความลึกแบบอ่อน	spr-shadow-drop-sm
.spr-drop-shadow	เงาตกกลางสำหรับระดับมาตรฐาน	spr-shadow-drop
.spr-drop-shadow-md	เงาตกใหญ่สำหรับระดับสูง	spr-shadow-drop-md

เงาตกด้านบน

ชื่อคลาส	คำอธิบาย	คลาสพื้นฐาน
.spr-drop-shadow-top-sm	เงาตกด้านบนเล็ก	spr-shadow-drop-top-sm
.spr-drop-shadow-top	เงาตกด้านบนกลาง	spr-shadow-drop-top
.spr-drop-shadow-top-md	เงาตกด้านบนใหญ่	spr-shadow-drop-top-md

ลำดับชั้นทางภาพ

เงาสี่เหลี่ยมเป็นวิธีที่ยอดเยี่ยมในการสร้างลำดับชั้นทางภาพในอินเทอร์เฟซของคุณ:

• เงาเล็ก (spr-drop-shadow-sm) - สำหรับระดับที่อ่อนเช่นการ์ดหรือช่องป้อนข้อมูล
• เงากลาง (spr-drop-shadow) - สำหรับส่วนประกอบมาตรฐานเช่นปุ่มหรือโมดอล
• เงาใหญ่ (spr-drop-shadow-md) - สำหรับองค์ประกอบลอยตัวเช่นดรอปดาวน์หรือเครื่องมือแนะนำ

ตัวอย่าง

<!-- การใช้งานพื้นฐาน -->
<div class="p-4 spr-drop-shadow">การ์ดที่มีเงากลาง</div>

<!-- ขนาดเงาต่างๆ -->
<div class="p-4 mb-4 spr-drop-shadow-sm">เงาอ่อนสำหรับองค์ประกอบแบบช่องป้อนข้อมูล</div>

<div class="p-4 mb-4 spr-drop-shadow">เงามาตรฐานสำหรับการ์ด</div>

<div class="p-4 mb-4 spr-drop-shadow-md">เงาเด่นสำหรับองค์ประกอบลอยตัว</div>

<!-- เงาด้านบนสำหรับองค์ประกอบที่ยึดด้านล่าง -->
<div class="spr-drop-shadow-top p-4">ส่วนท้ายที่มีเงาด้านบน</div>

<!-- การใช้เงาแบบตอบสนอง -->
<div class="spr-drop-shadow-sm md:spr-drop-shadow">เงาแบบตอบสนองที่เพิ่มขึ้นในหน้าจอใหญ่</div>

<!-- การผสมผสานกับยูทิลิตี้อื่น -->
<div class="spr-background-color p-6 spr-rounded-border-radius-lg spr-drop-shadow">
  การ์ดที่มีเงา มุมโค้ง และพื้นหลัง
</div>

กรณีการใช้งานทั่วไป

• การ์ด: ใช้ spr-drop-shadow หรือ spr-drop-shadow-sm สำหรับการ์ดเนื้อหา
• โมดอล: ใช้ spr-drop-shadow-md สำหรับโอเวอร์เลย์โมดอล
• ดรอปดาวน์: ใช้ spr-drop-shadow-md สำหรับเมนูดรอปดาวน์
• ปุ่ม: ใช้ spr-drop-shadow-sm สำหรับระดับปุ่มที่อ่อน
• ปุ่มลอยตัว: ใช้ spr-drop-shadow-md สำหรับองค์ประกอบลอยตัวที่เด่น
• การนำทาง: ใช้ spr-drop-shadow-top สำหรับส่วนท้ายแบบเหนียวหรือการนำทางด้านล่าง