Exibição

De forma rápida e responsiva alterne o valor de exibição de componentes e faça muito mais com os utilitários de exibição. Inclui suporte para alguns dos valores mais comuns, bem como alguns extras para controlar a exibição durante a impressão.

Exemplos

Em linha

inline

<Box component="div" sx={{ display: 'inline' }}>inline</Box>
<Box component="div" sx={{ display: 'inline' }}>inline</Box>

Bloco

blockblock

<Box component="span" sx={{ display: 'block' }}>block</Box>
<Box component="span" sx={{ display: 'block' }}>block</Box>

Ocultando elementos

Para um desenvolvimento ágil para dispositivos móveis, use classes de exibição responsivas para mostrar e ocultar elementos por dispositivo. Evite criar versões totalmente diferentes do mesmo site, em vez disso, oculte o elemento de forma responsiva para cada tamanho de tela.

Tamanho da tela	Classe
Oculto em todas	`sx={{ display: 'none' }}`
Oculto em xs	`sx={{ display: { xs: 'none', sm: 'block' } }}`
Oculto em sm	`sx={{ display: { xs: 'block', sm: 'none', md: 'block' } }}`
Oculto em md	`sx={{ display: { xs: 'block', md: 'none', lg: 'block' } }}`
Oculto em lg	`sx={{ display: { xs: 'block', lg: 'none', xl: 'block' } }}`
Oculto em xl	`sx={{ display: { xs: 'block', xl: 'none' } }}`
Visível em xs	`sx={{ display: { xs: 'block', sm: 'none' } }}`
Visível em sm	`sx={{ display: { xs: 'none', sm: 'block', md: 'none' } }}`
Visível em md	`sx={{ display: { xs: 'none', md: 'block', lg: 'none' } }}`
Visível em lg	`sx={{ display: { xs: 'none', lg: 'block', xl: 'none' } }}`
Visível em xl	`sx={{ display: { xs: 'none', xl: 'block' } }}`

hide on screens wider than md

hide on screens smaller than md

<Box sx={{ display: { xs: 'block', md: 'none' }}}>
  oculta em telas maiores que md
</Box>
<Box sx={{ display: { xs: 'none', md: 'block' }}}>
  oculta em telas menores que md
</Box>

Exibição na impressão

Screen Only (Hide on print only)

Print Only (Hide on screen only)

<Box sx={{ display: 'block', displayPrint: 'none' }}>
  Somente tela (Oculta somente em impressão)
</Box>
<Box sx={{ display: 'none', displayPrint: 'block' }}>
  Somente impressão (Oculta somente em tela)
</Box>

Estouro

Not scrollable, overflow is hidden

Try scrolling this overflow auto box

<Box component="div" sx={{ overflow: 'hidden' }}>
  Estouro oculto
</Box>
<Box component="div" sx={{ overflow: 'visible' }}>
  Estouro visível
</Box>

Estouro de texto

Lorem Ipsum is simply dummy text

<Box component="div" sx={{ textOverflow: 'clip' }}>
  Estouro de texto com corte
</Box>
<Box component="div" sx={{ textOverflow: 'ellipsis' }}>
  Estouro de texto com reticências
</Box>

Visibilidade

Visible containerInvisible container

<Box component="div" sx={{ visibility: 'visible' }}>
  Visibilidade visível
</Box>
<Box component="div" sx={{ visibility: 'hidden' }}>
  Visibilidade oculta
</Box>

Espaço em branco

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

<Box component="div" sx={{ whiteSpace: 'nowrap' }}>
  Espaço em branco sem quebra
</Box>
<Box component="div" sx={{ whiteSpace: 'normal' }}>
  Espaço em branco normal
</Box>
</Box>
<Box component="div" sx={{ whiteSpace: 'normal' }}>
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</Box>
<Box component="div" sx={{ whiteSpace: 'normal' }}>
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</Box>

API

import { display } from '@material-ui/system';

Nome da importação	Propriedade	Propriedade CSS	Chave do tema
`displayPrint`	`displayPrint`	`display`	none
`displayRaw`	`display`	`display`	none
`overflow`	`overflow`	`overflow`	none
`textOverflow`	`textOverflow`	`text-overflow`	none
`visibility`	`visibility`	`visibility`	none
`whiteSpace`	`whiteSpace`	`white-space`	none