Pular para o conteúdo

🎉 Material UI v5 is out now! Check out the announcement blog post →

Ajude a traduzir esta página

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" display="inline">inline</Box>
<Box component="div" display="inline">inline</Box>

Bloco

blockblock
<Box component="span" display="block">block</Box>
<Box component="span" 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 display="none"
Oculto em xs display={{ xs: 'none', sm: 'block' }}
Oculto em sm display={{ xs: 'block', sm: 'none', md: 'block' }}
Oculto em md display={{ xs: 'block', md: 'none', lg: 'block' }}
Oculto em lg display={{ xs: 'block', lg: 'none', xl: 'block' }}
Oculto em xl display={{ xs: 'block', xl: 'none' }}
Visível em xs display={{ xs: 'block', sm: 'none' }}
Visível em sm display={{ xs: 'none', sm: 'block', md: 'none' }}
Visível em md display={{ xs: 'none', md: 'block', lg: 'none' }}
Visível em lg display={{ xs: 'none', lg: 'block', xl: 'none' }}
Visível em xl display={{ xs: 'none', xl: 'block' }}
hide on screens wider than md
hide on screens smaller than md
<Box display={{ xs: 'block', md: 'none' }}>
  oculta em telas maiores que md
</Box>
<Box 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 display="block" displayPrint="none">
  Somente tela (Oculta somente em impressão)
</Box>
<Box display="none" displayPrint="block">
  Somente impressão (Oculta somente em tela)
</Box>

Estouro

Overflow Hidden. Overflow Hidden. Overflow Hidden.
Overflow Auto. Overflow Auto. Overflow Auto.
<Box component="div" overflow="hidden">
  Estouro oculto
</Box>
<Box component="div" overflow="visible">
  Estouro visível
</Box>

Estouro de texto

Text Overflow Clip. Text Overflow Clip.
Text Overflow Ellipsis. Text Overflow Ellipsis
<Box component="div" textOverflow="clip">
  Estouro de texto com corte
</Box>
<Box component="div" textOverflow="ellipsis">
  Estouro de texto com reticências
</Box>

Visibilidade

Visibility VisibleVisibility Hidden
<Box component="div" visibility="visible">
  Visibilidade visível
</Box>
<Box component="div" visibility="hidden">
  Visibilidade oculta
</Box>

Espaço em branco

White Space Nowrap. White Space Nowrap.
White Space Normal. White Space Normal.
<Box component="div" whiteSpace="nowrap">
  Espaço em branco sem quebra
</Box>
<Box component="div" whiteSpace="normal">
  Espaço em branco normal
</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