Tabs เป็นองค์ประกอบ UI (User Interface) ที่ช่วยให้เราเห็นแผ่นข้อมูลต่างๆ โดยไม่ใช้พื้นที่เพิ่มเติม เหมือนกับแท็บในสมุดบันทึกหรือหนังสือ พวกมันทำเครื่องหมายตำแหน่งบนหน้าสำหรับข้อมูลเพิ่มเติม และระบุตัวตนโดยสิ่งที่แผ่นข้อมูลนั้นมีอยู่ เมื่อคุณคลิกที่แท็บ คุณจะได้รับข้อมูลที่เกี่ยวข้องกับแท็บนั้น
Bootstrap เป็น framework ที่ช่วยให้เราสร้าง tabs ได้อย่างรวดเร็ว ในบทความนี้ เราจะทบทวนวิธีตั้งค่า Bootstrap เรียนรู้ว่าทำไมเราต้องใช้ tabs และดูตัวอย่าง Bootstrap tabs ในการทำงานจริง
เริ่มต้นใช้งาน
สิ่งแรกที่เราต้องทำเพื่อให้แน่ใจว่าเราสามารถดู tabs บนหน้าเว็บของเราได้ คือ ตรวจสอบว่าเรามี dependencies ที่เหมาะสม สำหรับโปรเจกต์นี้ เราต้องการ Bootstrap, Popper.JS และ jQuery ไปที่หน้า Quick Start ของ Bootstrap เพื่อความช่วยเหลือในการได้ dependencies ทั้งหมด
ขึ้นอยู่กับคุณว่าจะลิงก์แพ็คเกจที่เราต้องการอย่างไร แต่วิธีที่ง่ายที่สุด เหมาะกับผู้เริ่มต้นที่สุด คือใช้ content delivery network — CDN — สำหรับ jQuery, Popper.js, และ Bootstrap ระวังลำดับของแท็ก <script> — ลำดับสำคัญที่นี่
คุณพร้อมเริ่มต้นแล้ว!
ใช้เอกสาร Bootstrap เพื่อสร้าง Tabs
ด้านซ้ายมือของหน้า "Introduction/Getting Started" คุณเห็นแถบด้านข้างที่ลิงก์ไปยังสิ่งต่างๆ มองหาลิงก์ "Components" และคลิกที่มัน นี่จะนำทางคุณไปยัง component แรกของ Bootstrap ที่มีอยู่: "Alerts" หากเราดูแถบด้านข้างอีกครั้ง มันได้รับการอัปเดตเพื่อแสดงลิงก์ต่างๆ ไปยัง components ทั้งหมดที่เรามีอยู่
คลิกที่ component "Navs" นี่จะมีข้อมูล tabs ที่เราต้องการเพื่อเริ่มต้น
เริ่มต้นด้วย Base Nav
เพื่อใช้โค้ดที่กำหนดในเอกสารของ Bootstrap เริ่มต้นด้วย base nav ที่ด้านบนของหน้า นี่แสดงให้เห็นว่า nav class ไม่ได้จัดการ styling พิเศษใดๆ
81% ของผู้เข้าร่วมระบุว่ารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสงานทางเทคโนโลยีหลังจากเข้าร่วมบูทแคมป์ ได้รับการจับคู่กับบูทแคมป์วันนี้
นักศึกษาจบบูทแคมป์เฉลี่ยใช้เวลาน้อยกว่า 6 เดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มบูทแคมป์จนหางานแรก
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
เพื่อสร้าง tabs ให้เพิ่ม class nav-tabs ไปที่บรรทัดแรกของโค้ดในแอตทริบิวต์ class
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <div> ***** tab content will go here as <div>s ***** </div>
จากมุมมอง UI ตอนนี้เรามี tabs แล้ว แต่เรายังไม่มีฟังก์ชันการทำงาน มาดูวิธีทำต่อไป
เพิ่ม Roles ให้กับ Markdown
เพื่อให้สอดคล้องกับมาตรฐาน ARIA (กฎการเข้าถึง) ให้เพิ่มแอตทริบิวต์ role ให้กับแท็กแต่ละตัว:
- สำหรับ <ul> เพิ่ม role=”tablist”
- สำหรับ <a> เพิ่ม role=”tab”
- สำหรับ <div> ที่ห่อหุ้มเนื้อหาของแต่ละแท็บ เพิ่ม role=”tabpanel”
เพิ่ม Attributes เพื่อชี้ไปที่ Tab-Content
ในจุดนี้ เรารู้ในระดับสูงว่าเรามีบล็อกโค้ดสำหรับลิงก์ และอีกบล็อกสำหรับเนื้อหา เราต้องทำสองสามอย่างเพื่อให้ tab เชื่อมต่อกับเนื้อหาของมัน เริ่มต้นกับบล็อกโค้ด <ul>
- ก่อนอื่น ให้เพิ่ม ids ให้กับทุกองค์ประกอบ <a> ใช้ "tab-name + -tab" (เช่น แท็บที่ชื่อ home — id ของพวกเขาจะเป็น "home-tab")
- สำหรับบล็อกโค้ด <div> ที่เก็บ tab-contents (ที่จะใช้เป็น tabpanels) ใช้ชื่อของแท็บที่เกี่ยวข้องเป็น id (เช่น เนื้อหาที่เกี่ยวข้องกับ home tab ควรมี id "home")
- ต่อไป ให้เพิ่ม href ให้กับแท็บที่ลิงก์ไปยัง id ของ tab-content ที่เกี่ยวข้อง เพื่อใช้สากล "home" tab แท็ก <a> ควรมี href " #home "
- เพิ่มแอตทริบิวต์ data-toggle ที่ระบุว่าอะไรคือสิ่งที่จะถูก toggle ในกรณีนี้คือ "tab"
- สุดท้าย ให้เพิ่ม aria attributes ใดๆ ที่จะช่วยผู้ที่ใช้เทคโนโลยีช่วยเหลือ
องค์ประกอบ <ul> ของเราพร้อมลิงก์ควรจะมีลักษณะดังนี้จนถึงตอนนี้:
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a id="a-tab" class="nav-link active" role="tab" data-toggle="tab" href="#a">A</a> </li> <li class="nav-item"> <a id="b-tab" class="nav-link" role="tab" data-toggle="tab" href="#b">B</a> </li> <li class="nav-item"> <a id="c-tab" class="nav-link" role="tab" data-toggle="tab" href="#c">C</a> </li> <li class="nav-item"> <a id="d-tab" class="nav-link" role="tab" data-toggle="tab" href="#d">D</a> </li> </ul>
องค์ประกอบ tab-content ต่อไป นี่คือบล็อกโค้ดแยกต่างหากจากบล็อก <ul> ที่มีลิงก์ทั้งหมดของเรา
- ตรวจสอบว่า tab contents divs ของคุณถูกห่อหุ้มใน outer div ที่ทำหน้าที่เป็น container สำหรับ divs ย่อยแต่ละตัว นอกจากนี้ ให้แน่ใจว่า divs ย่อยแต่ละตัวถูก命名สำหรับแท็บหัวข้อที่เหมาะสมจากบล็อกก่อนหน้า
- ให้แน่ใจว่า ARIA attributes ที่เหมาะสมถูกเพิ่มเข้ามา ที่นี่ เราใช้ aria-selected และ aria-labelledby Aria-labelledby ตรงกับ id ของ tab heading ที่ตรงกัน Aria-controls ตรงกับ id ของ div element นั้นๆ
- สุดท้าย ให้เพิ่มแอตทริบิวต์ class ที่อย่างน้อยมีชื่อ class "show" นี่คือ bootstrap class ที่ช่วยแสดง pane ที่เหมาะสมเมื่อคุณคลิกที่แท็บเฉพาะ "active" ส่วนของชื่อ class บ่งชี้ว่า pane ไหนกำลังแสดง "Fade" บ่งชี้ว่ามีการใช้ animation เพื่อ fade pane เข้าออกเมื่อแท็บถูกคลิก
โค้ดสำหรับหนึ่งใน tab-content divs มีดังนี้:
<div class="tab-content" style="padding: 20px;"> <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div> </div>
ใช้สิ่งนี้เป็นแนวทางในการสร้าง tab-content divs ที่เหลือ อ้างอิงโค้ดด้านล่างเพื่อช่วยคุณถ้าคุณติด
นี่คือโค้ดทั้งหมดในรูปแบบเต็ม:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <!-- Bootstrap stylesheet --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> <!-- tab headings --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a id="a-tab" class="nav-link active" data-toggle="tab" role="tab" href="#a">A</a> </li> <li class="nav-item"> <a id="b-tab" class="nav-link" data-toggle="tab" role="tab" href="#b">B</a> </li> <li class="nav-item"> <a id="c-tab" class="nav-link" data-toggle="tab" role="tab" href="#c">C</a> </li> <li class="nav-item"> <a id="d-tab" class="nav-link" data-toggle="tab" role="tab" href="#d">D</a> </li> </ul> <!-- tab contents --> <div class="tab-content" style="padding: 20px;"> <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div> <div id="b" aria-labelledby="b-tab" class="tab-pane fade" role="tabpanel" aria-controls="b" aria-selected="false">B</div> <div id="c" aria-labelledby="c-tab" class="tab-pane fade" role="tabpanel" aria-controls="c" aria-selected="false">C</div> <div id="d" aria-labelledby="d-tab" class="tab-pane fade" role="tabpanel" aria-controls="d" aria-selected="false">D</div> </div> <!-- jquery cdn --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- popper js cdn --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script> <!-- bootstrap cdn --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
สรุป
คุณเพิ่งสร้าง tab navigational component ด้วย Bootstrap! ลองมือสร้าง pill navigational containers ต่อไป Happy coding!
