Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

Offcanvas

Xây dựng các sidebars ẩn vào dự án của bạn để điều hướng, giỏ hàng, v.v. với một vài lớp và plugin JavaScript của chúng tôi.

Trên trang này

Làm thế nào nó hoạt động

Offcanvas là một thành phần thanh bên có thể được chuyển đổi qua JavaScript để xuất hiện từ cạnh trái, phải hoặc dưới cùng của khung nhìn. Các nút hoặc neo được sử dụng làm trình kích hoạt được gắn với các phần tử cụ thể mà bạn chuyển đổi và datacác thuộc tính được sử dụng để gọi JavaScript của chúng tôi.

  • Offcanvas chia sẻ một số mã JavaScript giống như các phương thức. Về mặt khái niệm, chúng khá giống nhau, nhưng chúng là các plugin riêng biệt.
  • Tương tự, một số biến Sass nguồn cho kiểu và kích thước của offcanvas được kế thừa từ các biến của phương thức.
  • Khi được hiển thị, offcanvas bao gồm một phông nền mặc định có thể được nhấp vào để ẩn các offcanvas.
  • Tương tự như các phương thức, chỉ có thể hiển thị một offcanvas tại một thời điểm.

Đứng lên! Với cách CSS xử lý hoạt ảnh, bạn không thể sử dụng marginhoặc translatetrên một .offcanvasphần tử. Thay vào đó, hãy sử dụng lớp như một phần tử gói độc lập.

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

Các ví dụ

Các thành phần của Offcanvas

Dưới đây là một ví dụ về offcanvas được hiển thị theo mặc định (qua .showbật .offcanvas). Offcanvas bao gồm hỗ trợ cho tiêu đề có nút đóng và một lớp nội dung tùy chọn cho một số từ đầu padding. Chúng tôi khuyên bạn nên bao gồm các tiêu đề offcanvas với các hành động loại bỏ bất cứ khi nào có thể hoặc cung cấp một hành động loại bỏ rõ ràng.

Offcanvas
Nội dung cho các offcanvas ở đây. Bạn có thể đặt bất kỳ thành phần Bootstrap nào hoặc các phần tử tùy chỉnh tại đây. 
<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>

Bản thử trực tiếp

Sử dụng các nút bên dưới để hiển thị và ẩn một phần tử offcanvas thông qua JavaScript để chuyển đổi .showlớp trên một phần tử với .offcanvaslớp.

  • .offcanvasẩn nội dung (mặc định)
  • .offcanvas.showhiển thị nội dung

Bạn có thể sử dụng liên kết có hrefthuộc tính hoặc nút có data-bs-targetthuộc tính. Trong cả hai trường hợp, data-bs-toggle="offcanvas"yêu cầu là bắt buộc.

Liên kết với href
Offcanvas
Một số văn bản dưới dạng trình giữ chỗ. Trong cuộc sống thực, bạn có thể có những yếu tố bạn đã chọn. Như, văn bản, hình ảnh, danh sách, v.v. 
<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>

Vị trí

Không có vị trí mặc định cho các thành phần offcanvas, vì vậy bạn phải thêm một trong các lớp bổ trợ bên dưới;

  • .offcanvas-startđặt offcanvas ở bên trái khung nhìn (được hiển thị ở trên)
  • .offcanvas-endđặt offcanvas ở bên phải khung nhìn
  • .offcanvas-topđặt offcanvas trên đỉnh của khung nhìn
  • .offcanvas-bottomđặt offcanvas ở cuối khung nhìn

Hãy thử các ví dụ trên cùng, bên phải và dưới cùng bên dưới.

Offcanvas hàng đầu
... 
<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 phải
... 
<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 đáy
... 
<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>

Phông nền

Việc cuộn <body>phần tử bị vô hiệu hóa khi có thể nhìn thấy một phần tử ngoại vi và phông nền của phần tử đó. Sử dụng data-bs-scrollthuộc tính để chuyển đổi <body>cuộn và data-bs-backdropchuyển đổi phông nền.

Màu với cuộn

Hãy thử cuộn phần còn lại của trang để xem tùy chọn này hoạt động.

Offcanvas với phông nền

.....

Phông nền có cuộn

Hãy thử cuộn phần còn lại của trang để xem tùy chọn này hoạt động.

<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">Backdrop 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>

Khả năng tiếp cận

Vì bảng điều khiển offcanvas về mặt khái niệm là một hộp thoại phương thức, hãy nhớ thêm aria-labelledby="..."— tham khảo tiêu đề offcanvas — vào .offcanvas. Lưu ý rằng bạn không cần thêm role="dialog"vì chúng tôi đã thêm nó qua JavaScript.

Sass

Biến

$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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Cách sử dụng

Plugin offcanvas sử dụng một số lớp và thuộc tính để xử lý công việc nặng nhọc:

  • .offcanvasẩn nội dung
  • .offcanvas.showhiển thị nội dung
  • .offcanvas-startẩn các offcanvas ở bên trái
  • .offcanvas-endẩn các offcanvas ở bên phải
  • .offcanvas-bottomẩn các offcanvas ở phía dưới

Thêm nút loại bỏ với data-bs-dismiss="offcanvas"thuộc tính, thuộc tính này sẽ kích hoạt chức năng JavaScript. Đảm bảo sử dụng <button>phần tử với nó để có hành vi phù hợp trên tất cả các thiết bị.

Qua các thuộc tính dữ liệu

Chuyển đổi

Thêm data-bs-toggle="offcanvas"và một data-bs-targethoặc hrefvào phần tử để tự động gán quyền kiểm soát một phần tử offcanvas. Thuộc data-bs-targettính chấp nhận một bộ chọn CSS để áp dụng các offcanvas vào. Đảm bảo thêm lớp offcanvasvào phần tử offcanvas. Nếu bạn muốn nó mở mặc định, hãy thêm lớp bổ sung show.

Bỏ qua

Loại bỏ có thể đạt được với datathuộc tính trên một nút trong offcanvas như được minh họa bên dưới:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

hoặc trên một nút bên ngoài offcanvas bằng cách sử dụng data-bs-targetnhư minh họa bên dưới:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Mặc dù cả hai cách để loại bỏ một offcanvas đều được hỗ trợ, hãy nhớ rằng việc loại bỏ từ bên ngoài một offcanvas không phù hợp với mẫu thiết kế hộp thoại phương thức WAI-ARIA . Làm điều này có nguy cơ đến bạn.

Qua JavaScript

Bật theo cách thủ công với:

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

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-bs-, như trong data-bs-backdrop="".

Tên Loại hình Mặc định Sự mô tả
backdrop boolean true Áp dụng phông nền trên cơ thể khi offcanvas đang mở
keyboard boolean true Đóng các offcanvas khi nhấn phím thoát
scroll boolean false Cho phép cuộn cơ thể khi offcanvas đang mở

Phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

Kích hoạt nội dung của bạn như một phần tử offcanvas. Chấp nhận một tùy chọn tùy chọn object.

Bạn có thể tạo một cá thể offcanvas với hàm tạo, ví dụ:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Phương pháp Sự mô tả
toggle Chuyển đổi một phần tử offcanvas thành hiển thị hoặc ẩn. Trả về trình gọi trước khi phần tử offcanvas thực sự được hiển thị hoặc bị ẩn (tức là trước khi sự kiện shown.bs.offcanvashoặc hidden.bs.offcanvassự kiện xảy ra).
show Hiển thị một phần tử offcanvas. Trả về trình gọi trước khi phần tử offcanvas thực sự được hiển thị (tức là trước khi shown.bs.offcanvassự kiện xảy ra).
hide Ẩn một phần tử offcanvas. Trả về trình gọi trước khi phần tử offcanvas thực sự bị ẩn (tức là trước khi hidden.bs.offcanvassự kiện xảy ra).
getInstance Phương thức tĩnh cho phép bạn lấy thể hiện offcanvas được liên kết với một phần tử DOM
getOrCreateInstance Phương thức tĩnh cho phép bạn lấy cá thể offcanvas được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo

Sự kiện

Lớp offcanvas của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng offcanvas.

Loại sự kiện Sự mô tả
show.bs.offcanvas Sự kiện này kích hoạt ngay lập tức khi showphương thức thể hiện được gọi.
shown.bs.offcanvas Sự kiện này được kích hoạt khi một phần tử offcanvas được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
hide.bs.offcanvas Sự kiện này được kích hoạt ngay lập tức khi hidephương thức đã được gọi.
hidden.bs.offcanvas Sự kiện này được kích hoạt khi một phần tử offcanvas bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})