สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Dropdown

ใน Bootstrap 4 นั้น Dropdown ถือเป็นหนึ่งในองค์ประกอบที่ช่วยให้การสร้างเมนูหรือตัวเลือกแบบเลื่อนลง (Dropdown) ทำได้ง่ายและสวยงาม โดยไม่จำเป็นต้องเขียน CSS หรือ JavaScript เองทั้งหมด เนื่องจาก Bootstrap มีคลาสที่ช่วยจัดการให้พร้อมใช้งานได้ทันที

การใช้งานพื้นฐานของ Dropdown

Dropdown พื้นฐานจะประกอบไปด้วยปุ่มที่เมื่อคลิกจะมีตัวเลือกแสดงออกมาข้างล่าง ปุ่มนี้ถูกสร้างโดยใช้คลาส dropdown-toggle และตัวเลือกใน Dropdown ถูกจัดกลุ่มไว้ในคลาส dropdown-menu แต่ละตัวเลือกถูกระบุโดยคลาส dropdown-item

ตัวอย่าง Dropdown พื้นฐาน

HTML
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
  • btn btn-secondary: ใช้จัดรูปแบบปุ่มให้เป็นปุ่มสีเทา
  • dropdown-toggle: ใช้กำหนดให้ปุ่มนี้สามารถทำงานเป็นปุ่ม Dropdown ได้
  • dropdown-menu: เป็นรายการของตัวเลือกใน Dropdown
  • dropdown-item: ใช้กำหนดแต่ละตัวเลือกในรายการ

Dropdown แบบแบ่งกลุ่ม (Dropdown Divider)

บางครั้งอาจต้องการแบ่งกลุ่มของตัวเลือกใน Dropdown เพื่อให้ผู้ใช้มองเห็นความแตกต่างของแต่ละกลุ่ม Bootstrap 4 มีคลาส dropdown-divider ที่ใช้สำหรับแบ่งกลุ่มตัวเลือกได้อย่างง่ายดาย

ตัวอย่าง Dropdown แบบแบ่งกลุ่ม

HTML
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown with Divider
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
  • dropdown-divider: ใช้เพื่อสร้างเส้นแบ่งระหว่างกลุ่มของตัวเลือกในเมนู

Dropdown แบบปิดใช้งาน (Disabled Dropdown Item)

Bootstrap ยังสามารถทำให้ตัวเลือกบางรายการใน Dropdown อยู่ในสถานะปิดการใช้งาน โดยการเพิ่มคลาส disabled เข้าไปในรายการนั้นๆ

ตัวอย่าง Dropdown แบบปิดการใช้งาน

HTML
<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown with Disabled Item
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>
  • disabled: ใช้เพื่อปิดการใช้งานตัวเลือกใน Dropdown

Dropdown ที่เลื่อนออกด้านขวา (Dropdown Menu Alignment)

โดยปกติแล้วตัวเลือกใน Dropdown จะแสดงออกมาในแนวตั้งที่ชิดซ้ายของปุ่มที่กด แต่ Bootstrap มีคลาส dropdown-menu-right ที่สามารถจัดให้รายการในเมนูแสดงชิดขวาได้

ตัวอย่าง Dropdown ที่เลื่อนออกด้านขวา

HTML
<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned Dropdown
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
  • dropdown-menu-right: ใช้เพื่อจัดตำแหน่งเมนูให้ชิดขวาของปุ่ม

Dropdown แบบเมนูจากฟอร์ม (Dropdown with Form)

เราสามารถใส่ฟอร์มหรือตัวควบคุมฟอร์มต่างๆ เช่น ช่องใส่ข้อความหรือปุ่มใน Dropdown ได้ โดยใส่องค์ประกอบของฟอร์มภายในคลาส dropdown-menu

ตัวอย่าง Dropdown ที่มีฟอร์ม

HTML
<div class="dropdown">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown with Form
  </button>
  <div class="dropdown-menu p-4" style="min-width: 300px;">
    <form>
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
  </div>
</div>
  • form-control: ใช้เพื่อจัดรูปแบบอินพุตให้ดูทันสมัยและสวยงาม
  • p-4: เป็นคลาสที่ใช้เพิ่มระยะห่างรอบๆ (padding) ด้านในเมนู

Dropdown ขนาดใหญ่ (Large Dropdown)

การเปลี่ยนขนาดของ Dropdown สามารถทำได้โดยการเปลี่ยนขนาดของปุ่มโดยใช้คลาสของปุ่ม เช่น btn-lg สำหรับปุ่มขนาดใหญ่ และ btn-sm สำหรับปุ่มขนาดเล็ก

ตัวอย่าง Dropdown ขนาดใหญ่

HTML
<div class="dropdown">
  <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
  • btn-lg: ใช้เพื่อขยายขนาดของปุ่มให้ใหญ่ขึ้น

สรุป

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

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

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