ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
in English

ออฟแคนวาส

สร้างแถบด้านข้างที่ซ่อนอยู่ในโครงการของคุณสำหรับการนำทาง ตะกร้าสินค้า และอื่นๆ ด้วยคลาสไม่กี่คลาสและปลั๊กอิน JavaScript ของเรา

มันทำงานอย่างไร

Offcanvas เป็นส่วนประกอบของแถบด้านข้างที่สามารถสลับผ่าน JavaScript เพื่อให้ปรากฏจากขอบด้านซ้าย ด้านขวา หรือด้านล่างของวิวพอร์ต ปุ่มหรือจุดยึดถูกใช้เป็นทริกเกอร์ที่แนบกับองค์ประกอบเฉพาะที่คุณสลับ และdataแอตทริบิวต์จะใช้เพื่อเรียกใช้ JavaScript ของเรา

  • Offcanvas ใช้โค้ด JavaScript เดียวกันกับ Modals ตามแนวคิดแล้วมันค่อนข้างคล้ายกัน แต่เป็นปลั๊กอินแยกต่างหาก
  • ในทำนองเดียวกัน ตัวแปร Sass ต้นทาง บาง ตัวสำหรับรูปแบบและขนาดของ offcanvas นั้นสืบทอดมาจากตัวแปรของ modal
  • เมื่อแสดง offcanvas จะมีฉากหลังเริ่มต้นที่สามารถคลิกเพื่อซ่อน offcanvas ได้
  • คล้ายกับโมดอล สามารถแสดง offcanvas ได้ครั้งละหนึ่งภาพเท่านั้น

หัวขึ้น! เมื่อพิจารณาว่า CSS จัดการกับภาพเคลื่อนไหวอย่างไร คุณไม่สามารถใช้marginหรือtranslateบน.offcanvasองค์ประกอบได้ ให้ใช้คลาสเป็นองค์ประกอบการห่ออิสระแทน

เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับ prefers-reduced-motionคิวรีสื่อ ดู ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา

ตัวอย่าง

ส่วนประกอบ Offcanvas

ด้านล่างนี้คือตัวอย่าง offcanvas ที่แสดงโดยค่าเริ่มต้น (ผ่าน.showon .offcanvas) Offcanvas รองรับส่วนหัวที่มีปุ่มปิดและตัวเลือกคลาสร่างกายสำหรับไฟล์ initial padding. เราขอแนะนำให้คุณรวมส่วนหัวของ offcanvas ด้วยการดำเนินการยกเลิกเมื่อทำได้ หรือระบุการดำเนินการปิดอย่างชัดแจ้ง

ออฟแคนวาส
เนื้อหาสำหรับ offcanvas อยู่ที่นี่ คุณสามารถวางองค์ประกอบ Bootstrap หรือองค์ประกอบที่กำหนดเองได้ที่นี่
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

สาธิตสด

ใช้ปุ่มด้านล่างเพื่อแสดงและซ่อนองค์ประกอบ offcanvas ผ่าน JavaScript ที่สลับ.showคลาสบนองค์ประกอบที่มี.offcanvasคลาส

  • .offcanvasซ่อนเนื้อหา (ค่าเริ่มต้น)
  • .offcanvas.showแสดงเนื้อหา

คุณสามารถใช้ลิงก์ที่มีhrefแอตทริบิวต์หรือปุ่มที่มีdata-bs-targetแอตทริบิวต์ได้ ในทั้งสองกรณีdata-bs-toggle="offcanvas"จำเป็นต้องมี

ลิงก์กับ href
ออฟแคนวาส
ข้อความบางส่วนเป็นตัวยึดตำแหน่ง ในชีวิตจริง คุณสามารถมีองค์ประกอบที่คุณเลือกได้ เช่น ข้อความ รูปภาพ รายการ ฯลฯ
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

ตำแหน่ง

ไม่มีตำแหน่งเริ่มต้นสำหรับส่วนประกอบ offcanvas ดังนั้นคุณต้องเพิ่มคลาสตัวปรับแต่งด้านล่าง

  • .offcanvas-startวาง offcanvas ไว้ทางด้านซ้ายของวิวพอร์ต (แสดงไว้ด้านบน)
  • .offcanvas-endวาง offcanvas ไว้ทางด้านขวาของวิวพอร์ต
  • .offcanvas-topวาง offcanvas ไว้ที่ด้านบนของวิวพอร์ต
  • .offcanvas-bottomวาง offcanvas ไว้ที่ด้านล่างของวิวพอร์ต

ลองใช้ตัวอย่างด้านบน ด้านขวา และด้านล่างด้านล่าง

ท็อปแคนวาส
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas ถูกต้อง
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ด้านล่าง Offcanvas
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

ฉากหลัง

การเลื่อน<body>องค์ประกอบจะถูกปิดใช้งานเมื่อมองเห็น offcanvas และฉากหลัง ใช้data-bs-scrollแอตทริบิวต์เพื่อสลับ<body>การเลื่อนและdata-bs-backdropสลับฉากหลัง

ระบายสีด้วยการเลื่อน

ลองเลื่อนส่วนที่เหลือของหน้าเพื่อดูการทำงานของตัวเลือกนี้

Offcanvas พร้อมฉากหลัง

.....

ฉากหลังด้วยการเลื่อน

ลองเลื่อนส่วนที่เหลือของหน้าเพื่อดูการทำงานของตัวเลือกนี้

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

การเข้าถึง

เนื่องจากแผง offcanvas เป็นกรอบโต้ตอบแบบโมดอล ดังนั้นอย่าลืมเพิ่มaria-labelledby="..."— อ้างอิงชื่อ offcanvas— ลงใน.offcanvas. โปรดทราบว่าคุณไม่จำเป็นต้องเพิ่มrole="dialog"เนื่องจากเราได้เพิ่มผ่าน JavaScript แล้ว

ซาส

ตัวแปร

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

การใช้งาน

ปลั๊กอิน offcanvas ใช้คลาสและคุณลักษณะบางอย่างเพื่อจัดการกับงานหนัก:

  • .offcanvasซ่อนเนื้อหา
  • .offcanvas.showแสดงเนื้อหา
  • .offcanvas-startซ่อน offcanvas ทางด้านซ้าย
  • .offcanvas-endซ่อน offcanvas ทางด้านขวา
  • .offcanvas-bottomซ่อน offcanvas ที่ด้านล่าง

เพิ่มปุ่มปิดที่มีdata-bs-dismiss="offcanvas"แอตทริบิวต์ ซึ่งจะเรียกใช้ฟังก์ชัน JavaScript อย่าลืมใช้<button>องค์ประกอบกับองค์ประกอบเพื่อให้ทำงานได้อย่างถูกต้องในทุกอุปกรณ์

ผ่านแอตทริบิวต์ข้อมูล

เพิ่มdata-bs-toggle="offcanvas"และ a data-bs-targetหรือhrefให้กับองค์ประกอบเพื่อกำหนดการควบคุมองค์ประกอบ offcanvas หนึ่งรายการโดยอัตโนมัติ แอตทริบิวต์data-bs-targetยอมรับตัวเลือก CSS เพื่อนำไปใช้กับ offcanvas อย่าลืมเพิ่มคลาสoffcanvasให้กับองค์ประกอบ offcanvas หากคุณต้องการให้เปิดโดยค่าเริ่มต้น ให้เพิ่มคลาสshowเพิ่มเติม

ผ่านจาวาสคริปต์

เปิดใช้งานด้วยตนเองด้วย:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-bs-เช่นเดียวกับในdata-bs-backdrop="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
backdrop บูลีน true ใช้ฉากหลังบนร่างกายในขณะที่ offcanvas เปิดอยู่
keyboard บูลีน true ปิด offcanvas เมื่อกดแป้น Escape
scroll บูลีน false อนุญาตให้เลื่อนเนื้อหาในขณะที่ offcanvas เปิดอยู่

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

เปิดใช้งานเนื้อหาของคุณเป็นองค์ประกอบ offcanvas ยอมรับตัวเลือกobjectเสริม

คุณสามารถสร้างอินสแตนซ์ offcanvas ด้วยตัวสร้าง ตัวอย่างเช่น

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
วิธี คำอธ��บาย
toggle สลับองค์ประกอบ offcanvas เพื่อแสดงหรือซ่อน กลับไปยังผู้เรียกก่อนที่องค์ประกอบ offcanvas จะถูกแสดงหรือซ่อนอยู่จริง (เช่น ก่อนที่ เหตุการณ์ shown.bs.offcanvasor hidden.bs.offcanvasจะเกิดขึ้น)
show แสดงองค์ประกอบ offcanvas กลับไปยังผู้เรียกก่อนที่องค์ประกอบ offcanvas จะถูกแสดงจริง (เช่น ก่อนที่shown.bs.offcanvasเหตุการณ์จะเกิดขึ้น)
hide ซ่อนองค์ประกอบ offcanvas กลับไปยังผู้เรียกก่อนที่องค์ประกอบ offcanvas จะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.offcanvasเหตุการณ์จะเกิดขึ้น)
getInstance วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์ offcanvas ที่เชื่อมโยงกับองค์ประกอบ DOM
getOrCreateInstance วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์ offcanvas ที่เชื่อมโยงกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น

เหตุการณ์

คลาส offcanvas ของ Bootstrap เผยให้เห็นเหตุการณ์บางอย่างสำหรับการเชื่อมต่อกับฟังก์ชัน offcanvas

ประเภทงาน คำอธิบาย
show.bs.offcanvas เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshowการเรียกเมธอดของอินสแตนซ์
shown.bs.offcanvas เหตุการณ์นี้เริ่มทำงานเมื่อมีการทำให้องค์ประกอบ offcanvas ปรากฏแก่ผู้ใช้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
hide.bs.offcanvas เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhideมีการเรียกเมธอด
hidden.bs.offcanvas เหตุการณ์นี้เริ่มทำงานเมื่อองค์ประกอบ offcanvas ถูกซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})