Hidden
Быстро и адаптивно изменяйте видимость компонент и многое другое с помощью наших утилит управления видимостью.
Все элементы видны, если они явно не скрыты. Чтобы упростить интеграцию с точками остановки Material-UI, этот компонент можно использовать для скрытия любого контента, или использовать его в сочетании с нашим компонентом Grid.
Как это работает
Скрытие работает с диапазоном точек остановки, например, xsUp или mdDown, или использует одну или несколько точек остановки, например, only='sm' или only={['md', 'xl']}. Диапазоны и отдельные точки остановки могут использоваться одновременно для достижения индивидуального поведения. Диапазоны включают указанные точки остановки.
innerWidth |xs sm md lg xl
|--------|--------|--------|--------|-------->
width | xs | sm | md | lg | xl
smUp | show | hide
mdDown | hide | show
Реализации
js
По умолчанию используется реализация js, которая быстро скрывает контент, используя компонент высшего порядка withWidth(), который следит за размером экрана. Преимущество этого заключается в том, что контент вообще не отображается, если не достигнута точка остановки.
css
Если вы используете рендеринг на стороне сервера, вы можете установить implementation="css", если вы не хотите, чтобы браузер повторно выводил ваш контент на экран.
Точка остановки Вверх (up)
Используя любое свойство точки остановки от down, данные дочерних элементов будут скрыты на уровне или ниже точки остановки.
Точка остановки Вниз
Используя свойство точки остановки only, данные дочерних элементов будут скрыты на указанной точке (точках) остановки.
Точка остановки Только (only)
Свойство only можно использовать двумя способами:
The only prop can be used in two ways:
- указать одну точку остановки
- перечислить массив точек остановки
Интеграция с Grid (Сеткой)
Весьма обычным является изменение Grid в разных точках остановки, и во многих случаях вы хотите скрыть некоторые из этих элементов.