visibility

Ví dụ

Ẩn phần tử

Sử dụng tiện ích invisible để ẩn một phần tử, nhưng vẫn duy trì vị trí của nó trong tài liệu, ảnh hưởng đến bố cục của các phần tử khác:

<div class="grid grid-cols-3 gap-4">  <div>01</div>  <div class="invisible ...">02</div>  <div>03</div></div>

Để loại bỏ hoàn toàn một phần tử khỏi tài liệu, hãy sử dụng thuộc tính display thay thế.

Thu gọn phần tử

Sử dụng tiện ích collapse để ẩn các hàng, nhóm hàng, cột và nhóm cột của table 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:

<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>

Điều này cho phép chuyển đổi động các hàng và cột mà không ảnh hưởng đến bố cục của table.

Hiển thị phần tử

Sử dụng tiện ích visible để hiển thị một phần tử:

<div class="grid grid-cols-3 gap-4">  <div>01</div>  <div class="visible ...">02</div>  <div>03</div></div>

Điều này chủ yếu hữu ích để hủy bỏ tiện ích invisible ở các kích thước màn hình khác nhau.

Responsive design

Prefix a visibility utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="visible md:invisible ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.