布局
用于控制元素可见性的工具。
¥Basic usage
¥Making elements invisible
使用 invisible
工具隐藏元素,但仍保留其在 DOM 中的位置,从而影响其他元素的布局(与 display 文档中的 hidden
进行比较)。
¥Use the invisible
utility to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with hidden
from the display documentation).
<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="invisible ...">02</div>
<div>03</div>
</div>
¥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.
这使得在不影响表格布局的情况下动态切换行和列成为可能。
¥This makes it possible to dynamically toggle rows and columns without affecting the table layout.
Invoice # | Client | Amount |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.00 |
#102 | J. Peterman | $10,000.25 |
`collapse`
Invoice # | Client | Amount |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.00 |
#102 | J. Peterman | $10,000.25 |
`hidden`
Invoice # | Client | Amount |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.00 |
#102 | J. Peterman | $10,000.25 |
<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>
¥Making elements visible
使用 visible
工具使元素可见。这主要用于在不同屏幕尺寸下撤消 invisible
工具。
¥Use the visible
utility to make an element visible. This is mostly useful for undoing the invisible
utility at different screen sizes.
<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="visible ...">02</div>
<div>03</div>
</div>
Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:invisible
仅在 hover 时应用 invisible
工具。
<div class="visible hover:invisible">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。
你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:invisible
仅在中等屏幕尺寸及以上时应用 invisible
工具。
<div class="visible md:invisible">
<!-- ... -->
</div>