Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Visibility trong Tailwind CSS
Thuộc tính Visibility trong Tailwind CSS cho phép bạn kiểm soát việc hiển thị của phần tử trên trang web của bạn và hiển thị phần tử một cách linh hoạt và chính xác.
Khi phát triển trang web, việc kiểm soát việc hiển thị của các phần tử trên trang là một yếu tố quan trọng và đôi khi là thách thức đối với các nhà phát triển. Tailwind CSS là một framework CSS phổ biến với nhiều tính năng hữu ích giúp tối ưu hóa quá trình phát triển trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về thuộc tính Visibility trong Tailwind CSS và cách sử dụng các lớp visible, invisible và hidden để kiểm soát việc hiển thị của các phần tử trên trang của bạn.
1. Visibility trong Tailwind CSS là gì?
Tính năng Visibility trong Tailwind CSS là một công cụ hữu ích giúp người dùng có thể dễ dàng kiểm soát việc hiển thị hoặc ẩn thị phần tử trên giao diện web. Nhờ tính năng này, người dùng có thể dễ dàng tùy chỉnh trải nghiệm của mình trên trang web một cách linh hoạt. Ngoài ra, tính năng này còn giúp tối ưu hóa trải nghiệm người dùng bằng cách tăng tính thẩm mỹ cho trang web.
Với khả năng hiển thị hoặc ẩn hiển thị phần tử, người dùng có thể tạo ra các hiệu ứng độc đáo và thú vị trên trang web của mình. Nó cũng cho phép người dùng tùy chỉnh các phần tử trên trang web một cách dễ dàng hơn, tạo ra một trang web đẹp mắt và chuyên nghiệp hơn.Tóm lại, tính năng Visibility trong Tailwind CSS là một công cụ quan trọng để giúp tối ưu hóa trải nghiệm người dùng và tăng tính thẩm mỹ cho giao diện trang web.
Bài viết này được đăng tại [free tuts .net]
Các lớp Visibility được cung cấp trong Tailwind CSS bao gồm:
visible: Hiển thị phần tử.invisible: Ẩn phần tử nhưng vẫn giữ lại không gian của nó.collapse: Ẩn hàng trong bảng.
Giờ chúng ta hãy xem từng thuộc tính stylesheet ra sao nhé.
2. Sử dụng Visibility trong Tailwind CSS
Thuộc tính Invisible của Visibility
Khi thiết kế một trang web, việc xem xét cả về mặt thẩm mỹ và bố cục của các phần tử là rất quan trọng. Đôi khi, bạn có thể muốn ẩn một phần tử khỏi tầm nhìn của người dùng, nhưng vẫn chiếm cùng một không gian trong bố cục. Trong trường hợp này, bạn có thể sử dụng lớp invisible trong HTML để ẩn phần tử. Điều này khác với việc sử dụng lớp .hidden trong tài liệu display bởi vì lớp này hoàn toàn loại bỏ phần tử khỏi bố cục.
Sử dụng lớp invisible là hữu ích trong các trường hợp bạn muốn ẩn tạm thời một phần tử, nhưng vẫn giữ nó trong bố cục. Ví dụ, bạn có thể muốn ẩn một phần tử trong khi một quá trình nền đang chạy và sau đó hiển thị lại khi quá trình hoàn tất. Một trường hợp sử dụng khác là khi bạn muốn ẩn một phần tử dựa trên một tương tác của người dùng, chẳng hạn như nhấp vào nút hoặc di chuột.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Visibility trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="invisible ...">02</div>
<div>03</div>
</div>
</div>
</body>
</html>Kết quả như ở dưới đây
Hình ảnh sử dụng class invisible
Khi này, phần tử "02" vẫn tồn tại trên trang web và chiếm không gian trên trang, tuy nhiên, nó sẽ không được hiển thị. Lưu ý rằng lớp invisible sẽ giữ lại không gian của phần tử đó, do đó có thể ảnh hưởng đến bố cục của trang web của bạn.
Thuộc tính Collapse của Visibility
Sử dụng thuộc tính collapse trong Tailwind có thể là một cách tuyệt vời để ẩn các phần tử trong bảng mà không ảnh hưởng đến bố cục của bảng. Điều này xảy ra vì khi sử dụng collapse để ẩn các hàng, nhóm hàng, cột và nhóm cột trong bảng, chúng sẽ bị ẩn như thể chúng được đặt thành display: none, nhưng không ảnh hưởng đến kích thước của các hàng và cột khác.
Điều này có nghĩa là bạn có thể chuyển đổi các hàng và cột một cách linh hoạt mà không phải lo lắng về cách nó ảnh hưởng đến bố cục của bảng. Ngoài ra, điều này có thể đặc biệt hữu ích khi bạn có một bảng rất lớn mà bạn muốn có thể thu gọn hoặc mở rộng tùy thuộc vào nhu cầu của người dùng.
Bằng cách sử dụng thuộc tính collapse, bạn có thể đảm bảo rằng bảng vẫn sẽ trông đẹp và dễ đọc, dù có bao nhiêu hàng hoặc cột bị ẩn.
Ví dụ minh họa:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Visibility trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<table>
<thead>
<tr>
<th>Invoice #</th>
<th>Client</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>#100</td>
<td>Pendant Publishing</td>
<td>$2,000.00</td>
</tr>
<tr class="collapse">
<td>#101</td>
<td>Kruger Industrial Smoothing</td>
<td>$545.00</td>
</tr>
<tr>
<td>#102</td>
<td>J. Peterman</td>
<td>$10,000.25</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Còn đây là kết quả
Hình ảnh sử dụng class collapse
Thuộc tính Visible của Visibility
Để hiển thị một phần tử, bạn có thể sử dụng tiện ích visible. Điều này đặc biệt hữu ích khi bạn cần hoàn tác tiện ích invisible trên các kích thước màn hình khác nhau và muốn đảm bảo rằng phần tử luôn hiển thị cho người dùng.
Bằng cách áp dụng tiện ích visible cho một phần tử, bạn có thể đảm bảo rằng nó luôn xuất hiện trên trang, bất kể kích thước màn hình hoặc bất kỳ yếu tố nào khác có thể ảnh hưởng đến khả năng nhìn thấy của nó. Điều này đặc biệt hữu ích khi bạn đang xử lý các bố cục hoặc thiết kế phức tạp yêu cầu các phần tử nhất định luôn hiển thị để đảm bảo trải nghiệm người dùng tích cực.
Ví dụ nhỏ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Visibility trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="visible ...">02</div>
<div>03</div>
</div>
</div>
</body>
</html>Kết quả
Hình ảnh sử dụng class visible
Lưu ý rằng khi sử dụng lớp visible, không có gì thay đổi về không gian chiếm trên trang web của phần tử so với trước khi bị ẩn. Do đó, bạn nên cẩn thận khi sử dụng lớp này để tránh ảnh hưởng đến bố cục của trang web của bạn.
3. Áp dụng có điều kiện với Visibility trong Tailwind CSS
Trong phát triển web, việc xem xét cách người dùng tương tác với các phần tử trên trang là rất quan trọng. Một cách thông dụng để cải thiện trải nghiệm người dùng là thêm tính tương tác cho các phần tử để chúng thay đổi về hình dạng khi người dùng tương tác với chúng.
Trong Tailwind, bạn có thể áp dụng điều kiện cho các lớp tiện ích trong các trạng thái khác nhau bằng cách sử dụng các biến thay đổi. Điều này cho phép bạn tạo ra một trải nghiệm người dùng động và hấp dẫn hơn mà không cần sử dụng CSS tùy chỉnh.
Ví dụ, bạn có thể sử dụng hover:invisible để chỉ áp dụng lớp tiện ích invisible khi di chuột vào. Các trạng thái khác mà bạn có thể tương tác bao gồm trạng thái focus, active, và visited. Bằng cách tận dụng các trạng thái này, bạn có thể làm cho trang web của mình trở nên tương tác và trực quan hơn đối với người dùng.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Visibility trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="grid grid-cols-3 gap-4">
<div>01</div>
<!-- Sử dụng lớp có điều kiện Hover -->
<div class="visible hover:invisible">02</div>
<div>03</div>
</div>
</div>
</body>
</html>Còn đây là kết quả
Hình ảnh sử dụng class hover:invisible khi chưa di chuột
Hình ảnh sử dụng class hover:invisible khi di chuột vào
4. Kết luận
Tính năng Visibility trong Tailwind CSS rất hữu ích để tùy chỉnh hiển thị hoặc ẩn hiển thị phần tử trên giao diện web một cách dễ dàng và linh hoạt. Chúng ta có thể sử dụng các lớp visible, invisible và collapse để thực hiện điều này.
Hy vọng bài viết này sẽ giúp ích cho các bạn trong quá trình sử dụng Tailwind CSS.
