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.
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à data
cá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 margin
hoặc translate
trên một .offcanvas
phần tử. Thay vào đó, hãy sử dụng lớp như một phần tử gói độc lập.
prefers-reduced-motion
truy 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 .show
bậ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
<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 .show
lớp trên một phần tử với .offcanvas
lớp.
.offcanvas
ẩn nội dung (mặc định).offcanvas.show
hiển thị nội dung
Bạn có thể sử dụng liên kết có href
thuộc tính hoặc nút có data-bs-target
thuộc tính. Trong cả hai trường hợp, data-bs-toggle="offcanvas"
yêu cầu là bắt buộc.
Offcanvas
<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-scroll
thuộc tính để chuyển đổi <body>
cuộn và data-bs-backdrop
chuyể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 với tính năng 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">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>
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;
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.show
hiể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
Thêm data-bs-toggle="offcanvas"
và một data-bs-target
hoặc href
vào phần tử để tự động gán quyền kiểm soát một phần tử offcanvas. Thuộc data-bs-target
tí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 offcanvas
và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
.
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...
})