布局
用于控制元素可见性的实用工具。
类 | 样式 |
---|---|
可见 | visibility: visible; |
不可见 | visibility: hidden; |
折叠 | visibility: collapse; |
使用 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
一样,但不会影响其他行和列的大小
发票编号 | 客户 | 金额 |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.00 |
#102 | J. Peterman | $10,000.25 |
`collapse`
隐藏行发票编号 | 客户 | 金额 |
---|---|---|
#100 | Pendant Publishing | $2,000.00 |
#101 | Kruger Industrial Smoothing | $545.00 |
#102 | J. Peterman | $10,000.25 |
`hidden`
隐藏行发票编号 | 客户 | 金额 |
---|---|---|
#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>
这使得动态切换行和列成为可能,而不会影响表格布局。
使用 visible
实用工具使元素可见
<div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="visible ...">02</div> <div>03</div></div>
这主要用于在不同的屏幕尺寸下撤消 invisible
实用工具。
前缀a visibility
实用工具 带有像 md:
这样的断点变体,仅在中等 屏幕尺寸及以上时应用该实用工具
<div class="visible md:invisible ..."> <!-- ... --></div>
在变体文档中了解有关使用变体的更多信息。