This page is being translated; the original is shown (Русский ).
Видимость элемента
Классы visible и invisible задают свойство visibility. Невидимый элемент
не рисуется и не отвечает на клик, но занимает своё место, поэтому соседние
элементы не сдвигаются. Берите их, когда элемент скрывают и показывают без
перестройки раскладки.
Пример
В каждом образце второй блок несёт класс из подписи. Для сравнения третий образец —
hidden
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-3 gap-4 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >visible</code >
<div class ="flex gap-1 p-1 border border-dashed border-outline radius-ui" >
<div class ="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui text-center" >1</div >
<div class ="visible flex-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui text-center" >2</div >
<div class ="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui text-center" >3</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >invisible</code >
<div class ="flex gap-1 p-1 border border-dashed border-outline radius-ui" >
<div class ="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui text-center" >1</div >
<div class ="invisible flex-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui text-center" >2</div >
<div class ="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui text-center" >3</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >hidden</code >
<div class ="flex gap-1 p-1 border border-dashed border-outline radius-ui" >
<div class ="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui text-center" >1</div >
<div class ="hidden flex-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui text-center" >2</div >
<div class ="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui text-center" >3</div >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
visiblevisibility: visible—
invisiblevisibility: hidden—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:visible.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Скрыть, не сдвигая соседей
invisible оставляет место элемента пустым: подходит для мест, где раскладка
не должна прыгать, — например, для кнопки, которая появляется после выбора.
HTML wrap_text Wrap source lines content_copy Copy
<button type ="button" class ="invisible" >Сохранить</button >
Показать на части экранов
visible отменяет invisible. С префиксом ширины класс действует от
указанной ширины и шире:
HTML wrap_text Wrap source lines content_copy Copy
<div class ="invisible md:visible" >Виден от ширины md</div >
Выбор между invisible, hidden и sr-only
invisible — элемента не видно, место сохраняется.hiddensr-only
Ограничения
invisible скрывает элемент и от программ экранного доступа, и от
клавиатуры: фокус на него не попадает.Потомок с visible внутри родителя с invisible остаётся видимым.
У семейства нет префиксов состояния: hover:visible и подобные классы не
существуют.
См. также
Предыдущая Переполнение элемента Следующая Положение элемента по оси Z
