การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Offcanvas

Offcanvas เป็นองค์ประกอบของ Bootstrap 5 ที่ช่วยให้เราสามารถสร้างเมนูหรือตัวเลือกที่ซ่อนอยู่ด้านข้าง และสามารถเลื่อนเข้ามาในหน้าเมื่อมีการเรียกใช้งานได้ โดย Offcanvas เหมาะสำหรับการสร้างเมนูข้างหรือ sidebar บนหน้าจอเล็ก ๆ เช่น โทรศัพท์มือถือ ทำให้สามารถเพิ่มพื้นที่ในการแสดงเนื้อหาได้เต็มที่ในหน้าจอ

โครงสร้างพื้นฐานของ Offcanvas ใน Bootstrap 5

โครงสร้างพื้นฐานของ Offcanvas จะประกอบไปด้วย:

  • ปุ่ม สำหรับเปิด Offcanvas
  • องค์ประกอบ Offcanvas ที่เป็นแผงหรือเมนูที่เลื่อนออกมา

ตัวอย่างโค้ดพื้นฐานของ Offcanvas มีดังนี้

HTML
<!-- ปุ่มเปิด Offcanvas -->
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    เปิดเมนู
  </button>

  <!-- Offcanvas -->
  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">เมนู</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <p>เนื้อหาภายใน Offcanvas</p>
      <ul class="list-unstyled">
        <li><a href="#">ลิงก์ 1</a></li>
        <li><a href="#">ลิงก์ 2</a></li>
        <li><a href="#">ลิงก์ 3</a></li>
      </ul>
    </div>
  </div>

ในตัวอย่างนี้ เมื่อคลิกที่ปุ่ม “เปิดเมนู” จะมีเมนูเลื่อนเข้ามาจากทางด้านซ้าย โดยคุณสามารถเพิ่มเนื้อหาหรือเมนูที่คุณต้องการในส่วนของ <div class="offcanvas-body">

ลักษณะการประยุกต์ใช้งาน Offcanvas

Offcanvas ใน Bootstrap 5 สามารถประยุกต์ใช้งานได้หลายลักษณะ ดังนี้

การกำหนดทิศทางการเปิด Offcanvas

Offcanvas สามารถเลื่อนเข้ามาจากหลายทิศทาง ได้แก่ ซ้าย ขวา บน และล่าง โดยสามารถกำหนดคลาสที่ใช้ได้ดังนี้

  • offcanvas-start สำหรับเปิดจากด้านซ้าย (ค่าเริ่มต้น)
  • offcanvas-end สำหรับเปิดจากด้านขวา
  • offcanvas-top สำหรับเปิดจากด้านบน
  • offcanvas-bottom สำหรับเปิดจากด้านล่าง

ตัวอย่างการใช้ Offcanvas เปิดจากด้านขวา

HTML
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <!-- เนื้อหา -->
</div>

การกำหนดขนาดของ Offcanvas

Offcanvas สามารถกำหนดขนาดเพื่อให้เหมาะสมกับการใช้งานต่าง ๆ โดยใช้คลาสเช่น

  • offcanvas-sm สำหรับขนาดเล็ก
  • offcanvas-md สำหรับขนาดกลาง
  • offcanvas-lg สำหรับขนาดใหญ่

ตัวอย่างการใช้ Offcanvas ขนาดใหญ่

HTML
<div class="offcanvas offcanvas-start offcanvas-lg" tabindex="-1" id="offcanvasLarge" aria-labelledby="offcanvasLargeLabel">
  <!-- เนื้อหา -->
</div>

การใช้ Offcanvas เพื่อแสดงข้อมูลหรือฟอร์ม

นอกจากการใช้เพื่อสร้างเมนูแล้ว Offcanvas ยังสามารถใช้แสดงข้อมูลหรือฟอร์มที่ต้องการให้ผู้ใช้งานกรอกได้ โดยประยุกต์ใช้งานร่วมกับฟอร์มต่าง ๆ

ตัวอย่างการใช้ Offcanvas สำหรับแสดงฟอร์ม

HTML
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasForm" aria-labelledby="offcanvasFormLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasFormLabel">แบบฟอร์มติดต่อ</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <div class="mb-3">
        <label for="email" class="form-label">อีเมล</label>
        <input type="email" class="form-control" id="email" placeholder="ชื่อ@อีเมล.com">
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">ข้อความ</label>
        <textarea class="form-control" id="message" rows="3" placeholder="ข้อความของคุณ"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">ส่งข้อความ</button>
    </form>
  </div>
</div>

การใช้ Offcanvas แสดงผลในโมบายแอพหรือเว็บแอพ

Offcanvas สามารถนำไปประยุกต์ใช้กับเว็บแอพ หรือการสร้างโมบายแอพแบบ Progressive Web App (PWA) เพื่อทำให้ผู้ใช้งานสะดวกในการเข้าถึงเมนูหรือการตั้งค่าต่าง ๆ ที่ซ่อนอยู่

สรุป

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

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

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