Lzh on GitHub

visibility

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

快速参考

类样式
visiblevisibility: visible;
invisiblevisibility: hidden;
collapsevisibility: collapse;

示例

使元素不可见

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

01
03
<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
#102 J. Peterman $10,000.25 
<table>
  <thead>
    <tr>
      <th>发票 #</th>
      <th>客户</th>
      <th>金额</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
<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>

在 变体文档 中了解更多关于使用变体的信息。