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, trên hoặc dưới 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.

html

<div class="offcanvas offcanvas-start show" 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" 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.

html

<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Di chuyển cơ thể

Thao tá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 để bật tính năng <body>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.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Cuộn cơ thể và phông nền

Bạn cũng có thể bật tính năng <body>cuộn với phông nền có thể nhìn thấy được.

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

html

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

Phông nền tĩnh

Khi phông nền được đặt ở chế độ tĩnh, các thẻ quét tắt sẽ không đóng lại khi nhấp vào bên ngoài phông nền đó.

Tôi sẽ không đóng nếu bạn nhấp vào bên ngoài của tôi.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Dark offcanvas

Đã thêm vào v5.2.0

Thay đổi giao diện của các bản quét tắt bằng các tiện ích để khớp chúng tốt hơn với các ngữ cảnh khác nhau như thanh điều hướng tối. Ở đây, chúng tôi thêm .text-bg-darkvào .offcanvasvà .btn-close-whiteđể .btn-closetạo kiểu phù hợp với offcanvas tối. Nếu bạn có danh sách thả xuống bên trong, hãy cân nhắc thêm .dropdown-menu-darkvào .dropdown-menu.

Đặt nội dung offcanvas ở đây.

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Phản ứng nhanh nhẹn

Đã thêm vào v5.2.0

Các lớp offcanvas đáp ứng ẩn nội dung bên ngoài khung nhìn từ một điểm ngắt được chỉ định trở xuống. Trên điểm ngắt đó, nội dung bên trong sẽ hoạt động như bình thường. Ví dụ: .offcanvas-lgẩn nội dung trong một offcanvas bên dưới lgđiểm ngắt, nhưng hiển thị nội dung bên trên lgđiểm ngắt.

Thay đổi kích thước trình duyệt của bạn để hiển thị chuyển đổi offcanvas đáp ứng.

Đây là nội dung trong một .offcanvas-lg.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Các lớp offcanvas đáp ứng có sẵn cho mỗi điểm ngắt.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

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 đầu 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.

...

html

<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, offcanvas hiện sử dụng các biến CSS cục bộ trên .offcanvasđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Biến Sass

$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-topẩn các offcanvas trên đầu trang
.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 khớp với mẫu hộp thoại Hướng dẫn Thực hành Tác giả ARIA (phương thức) . Làm điều này có nguy cơ đến bạn.

Qua JavaScript

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

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Tùy chọn

Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào data-bs-, như trong data-bs-animation="{value}". Đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ “ camelCase ” thành “ kebab-case ” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ, sử dụng data-bs-custom-class="beautifier"thay vì data-bs-customClass="beautifier".

Kể từ Bootstrap 5.2.0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệmdata-bs-config có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có data-bs-config='{"delay":0, "title":123}'và data-bs-title="456"các thuộc tính, titlegiá trị cuối cùng sẽ là 456và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị được cho trên data-bs-config. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như data-bs-delay='{"show":0,"hide":150}'.

Tên	Loại hình	Mặc định	Sự mô tả
`backdrop`	boolean hoặc chuỗi`static`	`true`	Áp dụng một phông nền trên cơ thể khi offcanvas đang mở. Ngoài ra, hãy chỉ định `static`phông nền không đóng các dòng tắt khi được nhấp vào.
`keyboard`	boolean	`true`	Đóng các offcanvas khi nhấn phím thoát.
`scroll`	boolean	`false`	Cho phép cuộn cơ thể trong 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 . Chúng trở 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ụ:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Phương pháp	Sự mô tả
`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 thể hiện offcanvas được liên kết với một phần tử DOM hoặc tạo một thể hiện mới trong trường hợp nó chưa được khởi tạo.
`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).
`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).
`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).

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ả
`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).
`hidePrevented.bs.offcanvas`	Sự kiện này được kích hoạt khi các offcanvas được hiển thị, phông nền của nó là `static`và một cú nhấp chuột bên ngoài offcanvas được thực hiện. Sự kiện cũng được kích hoạt khi nhấn phím thoát và `keyboard`tùy chọn được đặt thành `false`.
`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).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // 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

Di chuyển cơ thể

Offcanvas với cơ thể cuộn

Cuộn cơ thể và phông nền

Phông nền có cuộn

Phông nền tĩnh

Offcanvas

Dark offcanvas

Offcanvas

Phản ứng nhanh nhẹn

Phản hồi offcanvas

Vị trí

Offcanvas hàng đầu

Offcanvas phải

Offcanvas đáy

Khả năng tiếp cận

CSS

Biến

Biến Sass

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