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>

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