版面配置
可見性
用於控制元素可見性的公用程式。
| 類別 | 樣式 |
|---|---|
visible | visibility: visible; |
invisible | visibility: hidden; |
collapse | visibility: collapse; |
範例
讓元素不可見
使用 invisible 公用程式來隱藏元素，但仍保持其在文件中的位置，並影響其他元素的版面配置
01
02
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 一樣，但不會影響其他列和欄的大小
顯示所有列
| 發票編號 | 客戶 | 金額 |
|---|---|---|
| #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 公用程式讓元素可見
01
02
03
<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>在變體文件中了解更多關於使用變體的資訊。
