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.

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

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.

...

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

...

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

...

<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.

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

.....

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.offcanvas`hoặc `hidden.bs.offcanvas`sự 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.offcanvas`sự 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.offcanvas`sự 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 `show`phươ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 `hide`phươ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...
})

Offcanvas

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

Các ví dụ

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

Offcanvas

Bản thử trực tiếp

Offcanvas

Vị trí

Offcanvas hàng đầu

Offcanvas phải

Offcanvas đáy

Phông nền

Màu với cuộn

Offcanvas với phông nền

Phông nền có cuộn

Khả năng tiếp cận

Sass

Biến

Cách sử dụng

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

Chuyển đổi

Bỏ qua

Qua JavaScript

Tùy chọn

Phương pháp

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

Sự kiện