visibility

用于控制元素可见性的工具类。

快速参考

类	属性
visible	visibility: visible;
invisible	visibility: hidden;
collapse	visibility: collapse;

示例

使元素不可见

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

01

02

03

<!-- [!code classes:invisible] -->
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="invisible ...">02</div>
  <div>03</div>
</div>

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

折叠元素

使用 collapse 工具类隐藏表格行、行组、列和列组，效果类似于设为 display: none，但不会影响其他行和列的尺寸：

Showing all rows

Invoice #	Client	Amount
#100	Pendant Publishing	$2,000.00
#101	Kruger Industrial Smoothing	$545.00
#102	J. Peterman	$10,000.25

Hiding a row using `collapse`

Invoice #	Client	Amount
#100	Pendant Publishing	$2,000.00
#101	Kruger Industrial Smoothing	$545.00
#102	J. Peterman	$10,000.25

Hiding a row using `hidden`

Invoice #	Client	Amount
#100	Pendant Publishing	$2,000.00
#101	Kruger Industrial Smoothing	$545.00
#102	J. Peterman	$10,000.25

<!-- [!code classes:collapse] -->
<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>

这样就可以动态切换行和列的显示，而不影响表格布局。

使元素可见

使用 visible 工具类使元素可见：

01

02

03

<!-- [!code classes:visible] -->
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="visible ...">02</div>
  <div>03</div>
</div>

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

响应式设计

使用 md: 等断点变体作为 visibility 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

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