ตัวยึด
ใช้ตัวยึดตำแหน่งการโหลดสำหรับส่วนประกอบหรือหน้าของคุณเพื่อระบุว่ามีบางอย่างกำลังโหลดอยู่
เกี่ยวกับ
สามารถใช้ตัวยึดตำแหน่งเพื่อปรับปรุงประสบการณ์การใช้งานของคุณ สร้างขึ้นด้วย HTML และ CSS เท่านั้น ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้ JavaScript เพื่อสร้าง อย่างไรก็ตาม คุณจะต้องใช้ JavaScript ที่กำหนดเองเพื่อสลับการมองเห็น รูปลักษณ์ สี และขนาดสามารถปรับแต่งได้อย่างง่ายดายด้วยคลาสยูทิลิตี้ของเรา
ตัวอย่าง
ในตัวอย่างด้านล่าง เรานำส่วนประกอบการ์ดทั่วไปมาสร้างใหม่โดยใช้ตัวยึดตำแหน่งเพื่อสร้าง "การโหลดการ์ด" ขนาดและสัดส่วนจะเท่ากันระหว่างทั้งสอง
ชื่อการ์ด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ไปที่ไหนสักแห่ง<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" aria-hidden="true">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>
มันทำงานอย่างไร
สร้างตัวยึดตำแหน่งด้วย.placeholder
คลาสและคลาสคอลัมน์กริด (เช่น.col-6
) เพื่อตั้งค่าwidth
. พวกเขาสามารถแทนที่ข้อความภายในองค์ประกอบหรือเพิ่มเป็นคลาสตัวแก้ไของค์ประกอบที่มีอยู่
เราใช้สไตล์เพิ่มเติมกับ.btn
s via ::before
เพื่อให้แน่ใจว่าheight
ได้รับการเคารพ คุณสามารถขยายรูปแบบนี้สำหรับสถานการณ์อื่นๆ ตามความจำเป็น หรือเพิ่ม
ภายในองค์ประกอบเพื่อสะท้อนความสูงเมื่อแสดงข้อความจริงแทน
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
aria-hidden="true"
เพียงบ่งชี้ว่าองค์ประกอบควรซ่อนไว้สำหรับโปรแกรมอ่านหน้าจอ ลักษณะ การ
โหลดของตัวยึดตำแหน่งขึ้นอยู่กับว่าผู้เขียนจะใช้รูปแบบตัวยึดตำแหน่งจริงอย่างไร พวกเขาวางแผนจะอัปเดตสิ่งต่าง ๆ อย่างไร ฯลฯ อาจจำเป็นต้องใช้โค้ด JavaScript บางส่วนเพื่อ
สลับสถานะของตัวยึดตำแหน่งและแจ้งให้ผู้ใช้ AT ทราบถึงการอัปเดต
ความกว้าง
คุณสามารถเปลี่ยนwidth
คลาสคอลัมน์ผ่านกริด ยูทิลิตี้ความกว้าง หรือสไตล์อินไลน์ได้
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
สี
โดยค่าเริ่มต้น การplaceholder
ใช้งานcurrentColor
. สามารถแทนที่ด้วยสีที่กำหนดเองหรือคลาสยูทิลิตี้
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
ขนาด
ขนาดของ.placeholder
s ขึ้นอยู่กับรูปแบบการพิมพ์ขององค์ประกอบหลัก ปรับแต่งด้วยตัวแก้ไขขนาด: .placeholder-lg
, , .placeholder-sm
หรือ.placeholder-xs
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>
แอนิเมชั่น
ตัวยึดตำแหน่งเคลื่อนไหวด้วย.placeholder-glow
หรือ.placeholder-wave
เพื่อถ่ายทอดการรับรู้ถึงสิ่งที่กำลังโหลดอยู่
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
ซาส
ตัวแปร
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;