Phương thức là các thành phần web hữu ích để tạo bố cục hấp dẫn cho thông báo người dùng, hộp đèn hoặc nội dung tùy chỉnh. Chúng tôi có thể giữ bất cứ thứ gì bên trong thành phần phương thức. Phương thức là một thành phần bật lên được kích hoạt bằng bất kỳ hành động cụ thể nào
Bootstrap hỗ trợ một thành phần phương thức được xác định trước với ba phần. tiêu đề phương thức, chân trang phương thức và nội dung phương thức. Mỗi phần được tùy chỉnh theo cách như tên của chúng. Phần tiêu đề sẽ được đặt ở trên cùng và phần chân trang sẽ được đặt ở dưới cùng của vùng chứa
Thành phần phương thức yêu cầu JavaScript để chuyển đổi trạng thái;
Các phương thức được hiển thị trên đầu mọi thành phần khác và loại bỏ cuộn trong khi hiển thị nó để nội dung phương thức có thể cuộn thay vì thành phần khác. Khi chúng ta chọn phần tử đóng của phương thức, nó sẽ không được đếm
Bootstrap không hỗ trợ các phương thức lồng nhau; . Đối với các phương thức lồng nhau, chúng tôi có thể sử dụng bất kỳ thư viện bên thứ ba nào, chẳng hạn như @restart/ui
Hãy hiểu cách sử dụng thành phần phương thức bằng React Bootstrap
Làm cách nào để tạo Modal bằng React Bootstrap?
React Bootstrap hỗ trợ thành phần để tạo phương thức. Chúng tôi có thể sử dụng,, và thành phần để chỉ định nội dung phương thức
Thành phần được nhập như sau
Xem xét ví dụ dưới đây
Ứng dụng. js
đầu ra
Từ đầu ra trên, chúng tôi đã tạo một thùng chứa phương thức. Tuy nhiên, hiện tại nó là một thùng chứa tĩnh vì chúng tôi không chỉ định trạng thái mở và đóng cho nó. Vì vậy, nó sẽ được hiển thị trên trang web. Để ẩn nó theo mặc định, chúng ta cần đặt trạng thái của nó thành false theo mặc định;
Hãy hiểu cách hiển thị và ẩn một phương thức
Làm cách nào để chuyển đổi Bootstrap Modal?
Để chuyển đổi một phương thức, chúng ta cần xử lý trạng thái phương thức. Chúng ta sẽ tạo một trạng thái [show, setShow] bằng cách sử dụng hook useState để hiển thị và ẩn thành phần phương thức
Hãy hiểu nó với ví dụ dưới đây
đầu ra
Đoạn mã trên sẽ hiển thị một thành phần nút vì chúng tôi đã đặt trạng thái mặc định của thành phần phương thức là sai
Khi ta click vào nút Launch modal nó sẽ cập nhật trạng thái của modal và hiển thị như sau
Tương tự khi chúng ta click vào nút close nó sẽ cập nhật trạng thái modal bằng cách dùng hàm modalClose và đóng nó lại
Do đó, chúng ta có thể tạo và chuyển đổi một thành phần phương thức bằng cách sử dụng React Bootstrap và hook useEffect
Phương thức với phông nền tĩnh
Theo mặc định, phương thức của Bootstrap được thiết kế để nếu chúng ta nhấp vào bên ngoài thành phần phương thức, nó sẽ bị đóng. Tuy nhiên, chúng ta có thể ghi đè hành vi này bằng cách tạo phông nền tĩnh
Để tạo phông nền ở dạng tĩnh, chúng ta có thể chuyển giá trị chống đỡ phông nền là tĩnh. Khi phông nền được chỉ định là tĩnh, phương thức sẽ không đóng khi nhấp vào bên ngoài thành phần
Xem xét ví dụ dưới đây
đầu ra
Thành phần phương thức trên sẽ được mở bằng cách nhấp vào nút Khởi chạy Mô hình và sẽ chỉ đóng bằng cách nhấp vào nút đóng hoặc biểu tượng loại bỏ. Nó sẽ đóng khi nhấp vào bên ngoài cửa sổ bật lên
Xóa Hoạt ảnh khỏi Cửa sổ Phương thức
Theo mặc định, nếu một phương thức Bootstrap được khởi chạy, nó sẽ mở dễ dàng bằng hoạt ảnh. Chúng tôi có thể loại bỏ nó bằng cách chuyển giá trị prop hoạt hình là sai
Để khởi chạy và đóng một phương thức không có hoạt ảnh, hãy chuyển giá trị bên dưới cho thành phần phương thức
Nó sẽ khởi chạy và đóng hoạt ảnh mà không có bất kỳ hoạt ảnh nào
Xem xét ví dụ dưới đây
Phương thức căn giữa theo chiều dọc
Chúng ta có thể căn giữa cửa sổ phương thức theo chiều dọc bằng cách chuyển giá đỡ được căn giữa cho thành phần phương thức. Chúng tôi không cần phải viết thủ công bất kỳ mã CSS nào để căn giữa cửa sổ bật lên phương thức
Xem xét ví dụ dưới đây
đầu ra
Kích thước phương thức
React Bootstrap cho phép chúng tôi chỉ định kích thước phương thức bằng cách chuyển size prop trong thành phần phương thức. Chúng ta có thể chỉ định sm và lg làm giá trị để chỉ định kích thước của phương thức
Xem xét ví dụ dưới đây
phương thức nhỏ
đầu ra
phương thức lớn
đầu ra
Chế độ toàn màn hình
Chống đỡ toàn màn hình cho phép chúng tôi hiển thị phương thức trên toàn màn hình. Trong Bootstrap 5, chúng ta có thể chỉ định các điểm dừng khác nhau để tạo chế độ toàn màn hình