สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน List Group

List Group เป็นหนึ่งในคอมโพเนนต์ของ Bootstrap ที่ช่วยจัดการแสดงรายการข้อมูลในรูปแบบที่เป็นระเบียบ และใช้งานได้ง่าย โดย Bootstrap 4 นั้นมีฟีเจอร์ที่ทำให้การใช้งาน List Group มีความหลากหลายและยืดหยุ่น สามารถใช้กับลิงก์ ปุ่ม หรือแม้กระทั่งทำงานร่วมกับคอมโพเนนต์อื่นได้ เช่น Badge หรือ Card

การสร้าง List Group พื้นฐาน

ในการเริ่มต้นใช้งาน List Group เราสามารถใช้ ul หรือ div ที่มีคลาส list-group และให้รายการแต่ละรายการใช้คลาส list-group-item ดังนี้

HTML
<ul class="list-group">
  <li class="list-group-item">รายการที่ 1</li>
  <li class="list-group-item">รายการที่ 2</li>
  <li class="list-group-item">รายการที่ 3</li>
</ul>

รายการจะถูกจัดให้อยู่ในรูปแบบของ List ที่สวยงามตามสไตล์ของ Bootstrap

การเพิ่ม Active และ Disabled State

หากต้องการแสดงรายการที่เป็น Active หรือ Disabled เราสามารถเพิ่มคลาส active หรือ disabled ได้ในแต่ละ list-group-item

HTML
<ul class="list-group">
  <li class="list-group-item active">รายการที่ 1 (Active)</li>
  <li class="list-group-item">รายการที่ 2</li>
  <li class="list-group-item disabled">รายการที่ 3 (Disabled)</li>
</ul>

การใช้งาน List Group ร่วมกับ Links และ Buttons

เราสามารถปรับ list-group-item ให้สามารถคลิกได้เหมือนลิงก์หรือปุ่มได้ โดยใช้แท็ก <a> หรือ <button>

การใช้งานกับลิงก์

HTML
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">ลิงก์ที่ 1 (Active)</a>
  <a href="#" class="list-group-item list-group-item-action">ลิงก์ที่ 2</a>
  <a href="#" class="list-group-item list-group-item-action disabled">ลิงก์ที่ 3 (Disabled)</a>
</div>

การใช้งานกับปุ่ม

HTML
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">ปุ่มที่ 1 (Active)</button>
  <button type="button" class="list-group-item list-group-item-action">ปุ่มที่ 2</button>
  <button type="button" class="list-group-item list-group-item-action disabled">ปุ่มที่ 3 (Disabled)</button>
</div>

การใช้ List Group กับ Badge

Bootstrap 4 รองรับการใช้ Badge เพื่อแสดงตัวเลขหรือข้อความเล็ก ๆ ข้าง ๆ รายการ เราสามารถใช้ Badge ภายใน List Group ได้ดังนี้

HTML
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    รายการที่ 1
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    รายการที่ 2
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    รายการที่ 3
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

การจัดเรียงรายการแนวนอน

หากต้องการให้ List Group แสดงผลในแนวนอน สามารถเพิ่มคลาส list-group-horizontal ได้ แต่ฟีเจอร์นี้จะใช้งานได้ในหน้าจอขนาดใหญ่ขึ้นไป

HTML
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">รายการที่ 1</li>
  <li class="list-group-item">รายการที่ 2</li>
  <li class="list-group-item">รายการที่ 3</li>
</ul>

การใช้ Contextual Classes ใน List Group

เราสามารถเปลี่ยนสีพื้นหลังของ list-group-item โดยใช้ Contextual Classes เช่น list-group-item-primary, list-group-item-success, list-group-item-danger เป็นต้น เพื่อเพิ่มความโดดเด่นให้กับรายการ

HTML
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">รายการที่ 1 (Primary)</li>
  <li class="list-group-item list-group-item-success">รายการที่ 2 (Success)</li>
  <li class="list-group-item list-group-item-danger">รายการที่ 3 (Danger)</li>
</ul>

การใช้งาน List Group ร่วมกับ Card

เราสามารถใช้ List Group ภายในคอมโพเนนต์ Card เพื่อสร้างการแสดงผลที่มีรายละเอียดเพิ่มเติมได้

HTML
<div class="card" style="width: 18rem;">
  <div class="card-header">
    รายการใน Card
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">รายการที่ 1</li>
    <li class="list-group-item">รายการที่ 2</li>
    <li class="list-group-item">รายการที่ 3</li>
  </ul>
</div>

สรุป

การใช้งาน List Group ใน Bootstrap 4 นั้นยืดหยุ่นและสามารถปรับใช้งานได้ในหลากหลายรูปแบบ ทั้งการแสดงรายการที่เรียบง่าย ไปจนถึงการประยุกต์ใช้งานกับคอมโพเนนต์อื่น ๆ เช่น Badge หรือ Card ทั้งนี้การใช้ Contextual Classes ยังช่วยทำให้รายการดูโดดเด่นมากยิ่งขึ้น การเลือกใช้งาน List Group ในการพัฒนาเว็บไซต์จะช่วยให้ข้อมูลของเรามีการจัดการที่ดีและดูเป็นระเบียบ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ