Макет
Утилиты для управления видимостью элемента.
Class | Styles |
---|---|
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
, но без влияния на размер других строк и столбцов:
Счет # | Клиент | Сумма |
---|---|---|
#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>Счет #</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
для отображения элемента:
<div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="visible ...">02</div> <div>03</div></div>
Это в основном полезно для отмены утилиты invisible
на разных размерах экрана.
Префикс a visibility
утилита с вариантом контрольной точки, например md:
, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="visible md:invisible ..."> <!-- ... --></div>
Подробнее об использовании вариантов читайте в документации по вариантам.