visibility

示例(Examples)

¥Examples

使元素不可见(Making elements invisible)

¥Making elements invisible

使用 invisible 工具隐藏元素，但仍保持其在文档中的位置，影响其他元素的布局：

¥Use the invisible utility to hide an element, but still maintain its place in the document, affecting the layout of other elements:

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

要完全从文档中删除元素，请改用 display 属性。

¥To completely remove an element from the document, use the display property instead.

折叠元素(Collapsing elements)

¥Collapsing elements

使用 collapse 工具隐藏表格行、行组、列和列组，就像它们被设置为 display: none 一样，但不影响其他行和列的大小：

¥Use the collapse utility to hide table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns:

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

这使得在不影响表格布局的情况下动态切换行和列成为可能。

¥This makes it possible to dynamically toggle rows and columns without affecting the table layout.

使元素可见(Making elements visible)

¥Making elements visible

使用 visible 工具使元素可见：

¥Use the visible utility to make an element visible:

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

这主要用于在不同屏幕尺寸下撤消 invisible 工具。

¥This is mostly useful for undoing the invisible utility at different screen sizes.

响应式设计(Responsive design)

¥Responsive design

在 visibility 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。