Pular para o conteúdo

🎉 Material UI v5 is out! Head to the migration guide to get started.

Hidden

Modifique rapidamente e de forma responsiva a visibilidade dos componentes e faça muito mais com o utilitário hidden.

Todos os elementos são visíveis a menos que estejam explicitamente ocultos. Para facilitar a integração com pontos de quebra responsivos do Material-UI, este componente pode ser utilizado para ocultar qualquer conteúdo, ou você pode usa-lo de forma conjunta com um componente Grid.

Como funciona

Hidden trabalha com um intervalo de pontos de quebra, por exemplo, xsUp ou mdDown, ou com um ou mais pontos de quebra, por exemplo, only='sm' ou only={['md', 'xl']}. Intervalos e pontos de quebra individuais podem ser usados simultaneamente para obter um comportamento muito mais customizado. Os intervalos são inclusivos com os pontos de quebra especificados.

innerWidth  |xs      sm       md       lg       xl
            |--------|--------|--------|--------|-------->
width       |   xs   |   sm   |   md   |   lg   |   xl

smUp        |   show | hide
mdDown      |                     hide | show

Implementações

js

Por padrão, a implementação js é usada, responsivamente oculta o conteúdo baseando-se no uso de withWidth(), componente de ordem elevada (higher-order) que observa o tamanho da tela. Isso tem o benefício de não renderizar nenhum conteúdo, a menos que o ponto de quebra seja atingido.

css

Se você estiver usando a renderização do lado do servidor, poderá definir implementation="css" se não quer que o navegador reprocesse seu conteúdo na tela.

Ponto de quebra acima

Usando qualquer propriedade de ponto de quebra com up, o componente children será ocultado em ou acima do ponto de quebra.

Ponto de quebra abaixo

Usando qualquer propriedade de ponto de quebra com down, o componente children será ocultado em ou abaixo do ponto de quebra.

Ponto de quebra somente

Usando a propriedade de ponto de quebra only, o componente children será ocultado no(s) ponto(s) de quebra especificado(s).

A propriedade only pode ser usada de duas maneiras:

  • com um único ponto de quebra
  • com um array de pontos de quebra

Integração com Grade

É bastante comum alterar um Grid em pontos de quebra responsivos diferentes e, em muitos casos, você deseja ocultar alguns desses elementos.