Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Modal, Toast và Spinners Trong Bootstrap (Phần 12)

Component Modal, Toast và Spinners Trong Bootstrap (Phần 12)


Ngày 3 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component modal, toast và spinners trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Modal:

Modal cơ bản là một hộp thoại hay cửa sổ bật lên được dùng để cung cấp thông tin quan trọng hay nhắc nhở người dùng thực hiện các hoạt động cần thiết trước khi tiếp tục. Ví dụ bạn tạo nút thanh toán sản phẩm để người dùng mua hàng thì thay vì phải chuyển sang trang khác để nhập thông tin thanh toán của người dùng thì ở ngay trang mua hàng chúng ta sẽ sử dụng modal để chứa Form thanh toán để người dùng nhập vào.

Đầu tiên để tạo được component này chúng ta sẽ thêm hai thuộc tính là data-toggle="modal"data-target="#modalID" với modalID là id của thẻ chứa nội dung sẽ hiện lên trong component Modal. Bây giờ bạn thử xem ví dụ thêm liên kết nội dung Modal với một button trong HTML dưới đây nhé:

HTML:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Noi_Dung_Modal">Nội Dung Modal</button>

Đối với thẻ chứa nội dung Modal thì đầu tiên ta sẽ gọi một thẻ div với class modal và bên trong nó ta tiếp tục gọi một class modal-dialog. Sau đó mình gọi thêm class modal-content dùng để chứa nội dung modal và trong thẻ div này được chia thành 3 thẻ div với 3 class: modal-header chứa tiêu đề của modal, modal-body chứa nội dung modal và modal-footer chứa đường dẫn hoặc thông tin thêm. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

HTML:

<div class="modal fade" id="Noi_Dung_Modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Tiêu Đề Modal</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">Nôi Dung Modal</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
  </div>

Bây giờ mình sẽ kết hợp hai đoạn code trên để tạo một component Modal hoàn chỉnh. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

Component Modal:

See the Pen Component Modal by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem rõ kết quả bạn chuyển sang chế độ screen 0.5x, 0.25x nhé. Bước tiếp theo mình muốn giới thiệu là chỉnh kích thước của component Modal bằng class modal-xl cho kích thước cực lớn, modal-lg cho kích thước lớn và modal-sm cho kích thước nhỏ. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Kích Thước Modal:

See the Pen Size of Modal by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem rõ kết quả bạn chuyển sang chế độ screen 0.5x, 0.25x nhé. Tiếp theo chúng ta sẽ thêm một component Form vào trong Modal nhé bằng cách mình sẽ thêm Form vào trong thẻ div class modal-body. Để hiểu rõ hơn bạn xem đoạn code sau đây nha:

Kết Hợp Form Và Modal:

See the Pen Form and Modal Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở các ví dụ trên khi bạn nhấn nút Esc trên bàn phím hay nhấn (click) chuột bên ngoài hộp thoại Modal thì nó sẽ tự động tắt đi. Đối với những thông tin hay Form quan trọng thì chúng ta nên tắt những tính năng đó bằng cách sử dụng thuộc tính data-backdrop="static" cho thẻ div có class modal. Để hiểu rõ hơn hãy cùng mình đi tìm hiểu ví dụ sau đây nhé:

Thuộc Tính data-backdrop:

See the Pen data-backdrop in Modal by haycuoilennao19 (@haycuoilennao19) on CodePen.

Component Toast:

Component Toast là component mới được giới thiệu trong Bootstrap4, nó sẽ thông báo khi người dùng thực hiện một sự kiện nào trên trang web của chúng ta. Do được xây dựng với tính chất flexbox vì vậy bạn có thể dễ dàng căn chỉnh vị trí của nó trên trang web. Theo mình thấy thì nó khá giống với component Tooltip nhưng vì lí do hiệu suất tối ưu hơn nên mình khuyên bạn nên sử dụng component này. Để gọi Toast thì đầu tiên ta sẽ tạo một thẻ div với class toast và bên trong nó ta sẽ tạo hai thẻ div với class toast-header chứa tiêu đề và toast-body chứa nội dung cho component này. Để nắm rõ hơn hãy cùng mình đi vào ví dụ nhé:

Component Toast:

See the Pen Component Toast by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở ví dụ trên mình dùng Jquery để xác định khi người dùng nhấn vào class hien_noi_dung thì chúng ta sẽ cho hiển thị component Toast. Bạn để ý thì component này xuất hiện rất nhanh vì delay của nó chỉ có 0.5s. Để cho nó xuất hiện lâu hơn mình sẽ sử dụng thuộc tính là data-delay="(time)", ví dụ mình muốn sau 3s thì nó mới ẩn đi thì sẽ gọi như sau: data-delay="3000". Ngoài ra nếu bạn muốn tắt tính năng tự động ẩn thì ta có thể sử dụng thuộc tính data-autohide="false". Bạn nhớ gắn các thuộc tính này với thẻ div với class toast. Nào để hiểu rõ hơn hãy cùng mình xem ví dụ dưới đây nhé:

Thuộc tính delay Toast:

See the Pen Toast delay by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc tính data-autohide="false" Toast:

See the Pen data-autohide="false" by haycuoilennao19 (@haycuoilennao19) on CodePen.

Component Spinners:

Component Spinners giúp chúng ta tạo hiệu ứng khi trang web đang được load. Spinners thường là những icon và được xây dựng bởi HTML, CSS. Tuy nhiên để ẩn hay hiện trên trang web thì bạn cần ghi một vài dòng code Javascript. Bây giờ ta sẽ tạo một spinners cơ bản bằng cách tạo một thẻ div với class spinner-border. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Component Spinners:

See the Pen component spinner by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra thì bạn có thể thêm màu sắc cho nó bằng thuộc tính text-(color) với color là các màu Bootstrap cơ bản như là primary, success... Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Màu Cho Component Spinners:

See the Pen color of snippers by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra Bootstrap còn cung cấp cho ta một loại snippers khác bằng cách sử dụng class spinner-grow. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Class spinner-grow:

See the Pen spinner-grow by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ chúng ta thử kết hợp snippers với button nhé. Để hiễu rõ hơn bạn xem ví dụ dưới đây nhé:

Kết hợp Spinner và Button:

See the Pen button and snippers by haycuoilennao19 (@haycuoilennao19) on CodePen.

Mình có lưu ý nhỏ là hai class spinner-grow-smspinner-border-sm ở trên giúp chúng ta giảm kích thước của component Snippers.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được thêm các component trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!