Hidden
Hidden: Cambia rápida y de manera responsiva el valor de visibilidad de los componentes y más con nuestras utilidades ocultas.
Todos los elementos son visibles a menos que estén explícitamente ocultos. Para facilitar la integración con interrupción responsivas de Material-UI, éste componente se puede usar para ocultar cualquier contenido, o puede usarlo junto con el componente Grid.
La función de estilo de la paleta.
Cómo funciona
Hidden funciona con un rango de puntos de interrupción, por ejemplo, xsUp o mdDown, o uno o más puntos de interrupción, por ejemplo, only = 'sm' o only = {['md', 'xl']}. Los rangos y los puntos de interrupción individuales se pueden usar simultáneamente para lograr un comportamiento muy personalizado. Los rangos son inclusivas de los puntos de interrupción.
innerWidth |xs sm md lg xl
|--------|--------|--------|--------|-------->
width | xs | sm | md | lg | xl
smUp | show | hide
mdDown | hide | show
Implementación
js
By default, the js implementation is used, responsively hiding content based on using the withWidth() higher-order component that watches screen size. This has the benefit of not rendering any content at all unless the breakpoint is met.
css
If you are using server-side rendering, you can set implementation="css" if you don't want the browser to re-flow your content on the screen.
Breakpoint up
Using any breakpoint up property, the given children will be hidden at or above the breakpoint.
Breakpoint down
Using any breakpoint down property, the given children will be hidden at or below the breakpoint.
Breakpoint only
The only property can be used in two ways:
The only prop can be used in two ways:
- list a single breakpoint
- list an array of breakpoints
Integration with Grid
It is quite common to alter Grid at different responsive breakpoints, and in many cases, you want to hide some of those elements.