Pular para o conteúdo

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
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
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.
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