Bootstrap - Offcanvas: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của thành phần Offcanvas trong Bootstrap. Đừng lo lắng nếu bạn là người mới - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng tìm hiểu chủ đề này từng bước một. Nào, hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng bắt đầu hành trình thú vị này!

Tổng quan

Trước hết - Offcanvas là gì? Hãy tưởng tượng bạn đang ở trong một căn hộ nhỏ và cần thêm không gian lưu trữ. Đột nhiên, một ngăn bí mật trượt ra từ tường - đó chính là Offcanvas trong thiết kế web! Nó là một thanh bên có thể trượt vào và ra khỏi tầm nhìn, cung cấp không gian bổ sung cho điều hướng, biểu mẫu hoặc bất kỳ nội dung nào bạn muốn giấu đi cho đến khi cần thiết.

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

Trước khi bắt đầu xây dựng, hãy phân tích các phần chính của một Offcanvas:

1. The trigger: Thường là một nút, khi nhấp vào sẽ hiển thị Offcanvas.
2. The Offcanvas itself: Bảng điều khiển trượt vào tầm nhìn.
3. The backdrop: Một lớp phủ tùy chọn làm tối nội dung chính khi Offcanvas mở.

Bây giờ, hãy xem cách các thành phần này kết hợp lại với nhau trong mã!

Trực quan Demo

Dưới đây là một ví dụ đơn giản để bắt đầu:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
Mở Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Tiêu đề Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Đóng"></button>
</div>
<div class="offcanvas-body">
<p>Đây là nội dung của Offcanvas. Bạn có thể đặt bất kỳ thứ gì bạn muốn ở đây!</p>
</div>
</div>

Hãy phân tích điều này:

1. The button có data-bs-toggle="offcanvas" để告诉 Bootstrap nó là một trigger cho Offcanvas.
2. data-bs-target="#demoOffcanvas" liên kết nút với Offcanvas có ID tương ứng.
3. The Offcanvas itself là một div với lớp offcanvas.
4. offcanvas-start đặt nó ở bên trái (chúng ta sẽ khám phá các vị trí khác sau).
5. The header chứa tiêu đề và nút đóng.
6. The body là nơi nội dung chính của bạn sẽ đi.

Cuộn trên Body

Theo mặc định, khi Offcanvas mở, body ở sau nó không thể cuộn. Nhưng nếu bạn muốn cho phép cuộn? Đơn giản thôi! Chỉ cần thêm data-bs-scroll="true" vào div của Offcanvas:

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="scrollableOffcanvas">
<!-- Nội dung Offcanvas -->
</div>

Cuộn trên Body và Backdrop

Muốn cho phép cuộn nhưng vẫn giữ lớp nền đẹp mắt? Không có vấn đề! Thêm data-bs-backdrop="false" cùng với data-bs-scroll="true":

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="scrollableBackdropOffcanvas">
<!-- Nội dung Offcanvas -->
</div>

Backdrop Tĩnh

Nếu bạn muốn Offcanvas stays open unless explicitly closed (tức là nhấp ngoài sẽ không đóng nó), sử dụng data-bs-backdrop="static":

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropOffcanvas">
<!-- Nội dung Offcanvas -->
</div>

Offcanvas Đen

Cảm thấy một chút goth? Hãy làm Offcanvas của chúng ta đen! Chỉ cần thêm lớp text-bg-dark:

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="darkOffcanvas">
<!-- Nội dung Offcanvas -->
</div>

T响应式

Đây là một mẹo hay - bạn có thể làm cho Offcanvas của bạn响应式! Nó có thể là Offcanvas trên màn hình nhỏ hơn và nội dung inline trên màn hình lớn hơn. Sử dụng các lớp .offcanvas-{breakpoint}:

<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="responsiveOffcanvas">
<!-- Nội dung Offcanvas -->
</div>

Offcanvas này sẽ là inline trên màn hình lớn hơn breakpoint 'lg' và là Offcanvas trên màn hình nhỏ hơn.

Đặt vị trí

Nhớ khi tôi đề cập rằng chúng ta có thể thay đổi vị trí? Dưới đây là cách:

Lớp	Vị trí
offcanvas-start	Bên trái
offcanvas-end	Bên phải
offcanvas-top	Trên
offcanvas-bottom	Dưới

Ví dụ, để đặt Offcanvas ở bên phải:

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas">
<!-- Nội dung Offcanvas -->
</div>

Truy cập

Cuối cùng nhưng không kém phần quan trọng, hãy nói về việc làm cho Offcanvas khả dụng cho tất cả người dùng:

1. Sử dụng aria-labelledby để liên kết Offcanvas với tiêu đề của nó:

<div class="offcanvas offcanvas-start" tabindex="-1" id="accessibleOffcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas Khả dụng</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Đóng"></button>
</div>
<!-- Nội dung Offcanvas -->
</div>

2. Sử dụng aria-controls trên nút trigger:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#accessibleOffcanvas" aria-controls="accessibleOffcanvas">
Mở Offcanvas Khả dụng
</button>

Và thế là xong, các bạn! Bây giờ bạn đã trở thành một chuyên gia Offcanvas. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngại thử nghiệm các thành phần này trong dự án của bạn. Ai biết được? Bạn có thể tạo ra một cảm giác trượt lớn tiếp theo trong thiết kế web!

Chúc các bạn编码愉快, và mong Offcanvas của bạn luôn trượt mượt mà!

Credits: Image by storyset