Các ' màn hình h ” trong Tailwind được dùng để gán chiều cao khung nhìn cho một phần tử HTML. Viewport chỉ là tên gọi khác cho kích thước màn hình của khách hàng. Nhà phát triển có thể dễ dàng chọn toàn bộ khung nhìn với sự trợ giúp của “ màn hình h ” và sau đó áp dụng một số lớp Tailwind tương ứng.
Bài viết này sẽ cung cấp quy trình thêm chiều cao khung nhìn vào một phần tử trong Tailwind bằng cách sử dụng “ màn hình h ' lớp học.
Làm cách nào để đặt Chiều cao khung nhìn của một phần tử bằng cách sử dụng lớp “h-screen” trong Tailwind?
Nếu một phần tử được gán chiều cao khung nhìn bằng cách sử dụng “ màn hình h ”, nó sẽ tự động điều chỉnh thuộc tính chiều cao theo màn hình của khách hàng. Để sử dụng chiều cao khung nhìn trong Tailwind, hãy làm theo quy ước được cung cấp bên dưới:
< div lớp học = 'màn hình h' > Xin chào < / div >
Từ chứng minh trên, có thể thấy rõ rằng “ màn hình h ” được sử dụng trong thuộc tính lớp của phần tử cùng với nhiều lớp Tailwind khác để thiết kế bố cục.
Hãy tạo một trang tổng quan giả và cung cấp chiều cao khung nhìn cho thanh bên của màn hình trang tổng quan.
< div lớp học = 'uốn cong' >
< div lớp học = 'w-56 h-screen round-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-in đậm' >Bảng điều khiển
< ul lớp học = 'text-lg py-8 space-y-7' >
< cái đó >Đội< / cái đó >
< cái đó >Dự án< / cái đó >
< cái đó >Báo cáo< / cái đó >
< cái đó >Tài liệu< / cái đó >
< / ul >
< / div >
< div lớp học = 'văn bản trung tâm văn bản-3xl py-8 ps-5' >Chào mừng đến với Trang tổng quan!< / div >
< / div >
Giải thích về mã:
- Đầu tiên, một “ div ” phần tử được tạo có lớp “ uốn cong ”, lớp này sắp xếp các mục cư trú theo một đường ngang.
- Tiếp theo, tạo một cái khác “ div ” với 8px phần đệm trên và dưới bằng cách sử dụng “ py-2 ” lớp và phân bổ cho nó một chiều rộng cố định bằng cách sử dụng lớp “ w-56 ' lớp học. Tiếp theo, đặt chiều cao của phần tử thành chiều cao khung nhìn bằng “ màn hình h ' lớp học. Các góc của thùng chứa được đặt thành tròn.
- Các ' bg-{color}-{number} ” được sử dụng để cung cấp màu nền cho vùng chứa. Các ' trung tâm văn bản ” lớp căn chỉnh nội dung văn bản vào giữa. Độ dày phông chữ cho văn bản được đặt thành “ in đậm ”, và cỡ chữ là “ 2xl ”.
- Tiếp theo, một danh sách không có thứ tự “< ul >” được tạo với cỡ chữ lớn và “ 48px ” lề trên sử dụng lớp tailwind “space-y”.
- Sau đó, bốn mục danh sách được tạo bằng cách sử dụng “< cái đó >” thẻ.
- Khác ' div Phần tử ” được tạo với phần đệm trên cùng dưới cùng 32px và phần đệm bắt đầu nội tuyến 20px bằng cách sử dụng “ py” và “ps ' các lớp học.
Đầu ra của mã được giải thích ở trên như sau:
Từ kết quả đầu ra ở trên, rõ ràng thanh bên của bảng điều khiển có chiều cao khung nhìn của màn hình. Đó là tất cả về mục đích của “ màn hình h ” lớp học ở Tailwind.
Phần kết luận
Các ' màn hình h ” trong Tailwind được dùng để gán chiều cao của Viewport cho một phần tử, tức là chiều cao của màn hình máy khách. Sử dụng ' màn hình h ” class, phần tử sẽ tự động kế thừa chiều cao màn hình. Để sử dụng chiều cao khung nhìn trong Tailwind, “ màn hình h ” thuộc tính phải được chuyển thành giá trị cho “ lớp học Thuộc tính ” như “< lớp div= “h-màn hình ”>”. Bài viết này đã cung cấp quy trình sử dụng “ màn hình h ” lớp học ở Tailwind.