เบ็ดเตล็ด

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

ยูทิลิตี้แถบเลื่อน

การซ่อนแถบเลื่อน

ชื่อคลาส	คำอธิบาย	เอฟเฟกต์
.spr-hidden-scrolls	ซ่อนแถบเลื่อน webkit ในขณะที่ยังคงการทำงานการเลื่อน	ใช้ spr-hidden กับ ::-webkit-scrollbar

แอนิเมชันและเอฟเฟกต์ทางภาพ

แอนิเมชันการโหลดโครงกระดูก

ชื่อคลาส	คำอธิบาย	คุณสมบัติ CSS
.spr-skeletal-loader	สร้างแอนิเมชันเต้นพร้อมพื้นหลังไล่ระดับสำหรับสถานะการโหลดโครงกระดูก	spr-animate-pulse spr-border-neutral-200 spr-bg-[linear-gradient(...)]

ตัวอย่างการใช้งาน

การซ่อนแถบเลื่อน

ใช้เมื่อคุณต้องการรักษาการทำงานการเลื่อนแต่ซ่อนแถบเลื่อนเพื่อให้ดูสะอาดขึ้น:

<!-- คอนเทนเนอร์ที่มีแถบเลื่อนซ่อน -->
<div class="spr-hidden-scrolls overflow-y-auto max-h-96">
  <div class="space-y-4">
    <!-- เนื้อหาที่เกินความสูงคอนเทนเนอร์ -->
    <div class="p-4">รายการ 1</div>
    <div class="p-4">รายการ 2</div>
    <div class="p-4">รายการ 3</div>
    <!-- ... รายการเพิ่มเติม -->
  </div>
</div>

<!-- คอนเทนเนอร์แชทหรือข้อความ -->
<div class="spr-hidden-scrolls overflow-y-auto h-64 p-4">
  <div class="space-y-2">
    <div class="spr-background-color-surface p-3 rounded">ข้อความ 1</div>
    <div class="spr-background-color-surface p-3 rounded">ข้อความ 2</div>
    <!-- ... ข้อความเพิ่มเติม -->
  </div>
</div>

ตัวโหลดโครงกระดูก

ใช้สำหรับสถานะการโหลดเพื่อปรับปรุงประสิทธิภาพที่รับรู้:

<!-- ตัวโหลดโครงกระดูกพื้นฐาน -->
<div class="spr-skeletal-loader spr-h-4 spr-w-full"></div>

<!-- โครงกระดูกการ์ด -->
<div class="spr-background-color p-6 rounded-lg space-y-4">
  <!-- โครงกระดูกหัวข้อ -->
  <div class="spr-skeletal-loader spr-h-6 spr-w-3/4"></div>

  <!-- โครงกระดูกบรรทัดเนื้อหา -->
  <div class="space-y-2">
    <div class="spr-skeletal-loader spr-h-4 spr-w-full"></div>
    <div class="spr-skeletal-loader spr-h-4 spr-w-full"></div>
    <div class="spr-skeletal-loader spr-h-4 spr-w-2/3"></div>
  </div>

  <!-- โครงกระดูกปุ่ม -->
  <div class="spr-skeletal-loader spr-h-10 spr-w-24 spr-rounded-border-radius-md"></div>
</div>

<!-- โครงกระดูกโปรไฟล์ -->
<div class="flex items-center space-x-4">
  <!-- โครงกระดูกอวาตาร์ -->
  <div class="spr-skeletal-loader rounded-full spr-h-12 spr-w-12"></div>

  <div class="space-y-2 flex-1">
    <!-- โครงกระดูกชื่อ -->
    <div class="spr-skeletal-loader spr-h-4 spr-w-32"></div>
    <!-- โครงกระดูกอีเมล -->
    <div class="spr-skeletal-loader spr-h-3 spr-w-48"></div>
  </div>
</div>

<!-- โครงกระดูกรายการ -->
<div class="space-y-3">
  <div v-for="i in 5" :key="i" class="flex items-center space-x-3">
    <div class="spr-skeletal-loader rounded spr-h-8 spr-w-8"></div>
    <div class="flex-1 space-y-2">
      <div class="spr-skeletal-loader spr-h-4 spr-w-3/4"></div>
      <div class="spr-skeletal-loader spr-h-3 spr-w-1/2"></div>
    </div>
  </div>
</div>

การใช้งานเฉพาะส่วนประกอบ

ตารางที่มีแถบเลื่อนซ่อน

<div class="spr-table-wrapper">
  <table class="w-full">
    <thead>
      <tr>
        <th>คอลัมน์ 1</th>
        <th>คอลัมน์ 2</th>
        <th>คอลัมน์ 3</th>
      </tr>
    </thead>
    <tbody class="spr-hidden-scrolls">
      <!-- แถวตาราง -->
    </tbody>
  </table>
</div>

สถานะการโหลดพร้อมโครงกระดูก

<!-- ก่อนโหลดข้อมูล -->
<div v-if="loading" class="space-y-4">
  <div class="spr-skeletal-loader spr-h-8 spr-w-64"></div>
  <div class="grid grid-cols-3 gap-4">
    <div class="spr-skeletal-loader spr-h-32"></div>
    <div class="spr-skeletal-loader spr-h-32"></div>
    <div class="spr-skeletal-loader spr-h-32"></div>
  </div>
</div>

<!-- หลังโหลดข้อมูลแล้ว -->
<div v-else>
  <h1 class="spr-heading-lg">เนื้อหาที่โหลดแล้ว</h1>
  <!-- เนื้อหาจริง -->
</div>

แนวทางปฏิบัติที่ดี

การซ่อนแถบเลื่อน

• ใช้อย่างประหยัด: ซ่อนแถบเลื่อนเฉพาะเมื่อการออกแบบต้องการเท่านั้น
• ตรวจสอบการเข้าถึง: ตรวจสอบให้แน่ใจว่าผู้ใช้ยังสามารถเข้าใจได้ว่าเนื้อหาสามารถเลื่อนได้
• ให้สัญญาณทางภาพ: พิจารณาเพิ่มเอฟเฟกต์เฟดหรือตัวบ่งชี้การเลื่อน
• ทดสอบข้ามอุปกรณ์: ตรวจสอบพฤติกรรมในระบบปฏิบัติการและเบราว์เซอร์ต่างๆ

ตัวโหลดโครงกระดูก

• จับคู่โครงสร้างเนื้อหา: โครงกระดูกควรสะท้อนเลย์เอาต์เนื้อหาจริง
• ใช้เวลาที่เหมาะสม: แสดงโครงกระดูกสำหรับการดำเนินการที่ใช้เวลามากกว่า 200ms
• รักษาอัตราส่วน: ขนาดโครงกระดูกควรตรงกับเนื้อหาที่คาดหวัง
• ผสมผสานกับทรานซิชัน: ใช้แอนิเมชันเฟดอินเมื่อการโหลดเสร็จสิ้น

<!-- โครงกระดูกที่ดี - ตรงกับโครงสร้างเนื้อหา -->
<div class="space-y-4">
  <div class="spr-skeletal-loader spr-h-6 spr-w-3/4"></div>
  <!-- หัวข้อ -->
  <div class="spr-skeletal-loader spr-h-4 spr-w-full"></div>
  <!-- บรรทัด 1 -->
  <div class="spr-skeletal-loader spr-h-4 spr-w-5/6"></div>
  <!-- บรรทัด 2 -->
  <div class="spr-skeletal-loader spr-h-10 spr-w-32 spr-rounded-border-radius-md"></div>
  <!-- ปุ่ม -->
</div>

<!-- ทรานซิชันเมื่อเนื้อหาโหลด -->
<transition name="fade" mode="out-in">
  <div v-if="loading" class="skeleton-container">
    <!-- เนื้อหาโครงกระดูก -->
  </div>
  <div v-else class="actual-content">
    <!-- เนื้อหาจริง -->
  </div>
</transition>