レイアウト
要素の可視性を制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
visible | visibility: visible; |
invisible | visibility: hidden; |
collapse | 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 に設定した場合と同様に非表示にしますが、他の行と列のサイズには影響を与えません。
| 請求書 No. | クライアント | 金額 |
|---|---|---|
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |
`collapse` を使用して行を非表示にする| 請求書 No. | クライアント | 金額 |
|---|---|---|
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |
`hidden` を使用して行を非表示にする| 請求書 No. | クライアント | 金額 |
|---|---|---|
| #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: のようなブレークポイント variant を使用して、ユーティリティを適用するmedium 以上のスクリーンサイズ
<div class="visible md:invisible ..."> <!-- ... --></div>variants ドキュメントで、variants の使用方法について詳しく学んでください。