顯示

使用顯示工具快速且響應式地切換顯示、溢位、可見性等。

範例

行內

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

區塊

區塊區塊

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

隱藏元素

為了更快速的行動裝置友善開發，請使用響應式顯示類別來依裝置顯示和隱藏元素。避免為同一個網站建立完全不同的版本，而是針對每個螢幕尺寸響應式地隱藏元素。

螢幕尺寸	類別
全部隱藏	`sx={{ display: 'none' }}`
僅在 xs 尺寸隱藏	`sx={{ display: { xs: 'none', sm: 'block' } }}`
僅在 sm 尺寸隱藏	`sx={{ display: { xs: 'block', sm: 'none', md: 'block' } }}`
僅在 md 尺寸隱藏	`sx={{ display: { xs: 'block', md: 'none', lg: 'block' } }}`
僅在 lg 尺寸隱藏	`sx={{ display: { xs: 'block', lg: 'none', xl: 'block' } }}`
僅在 xl 尺寸隱藏	`sx={{ display: { xs: 'block', xl: 'none' } }}`
僅在 xs 尺寸可見	`sx={{ display: { xs: 'block', sm: 'none' } }}`
僅在 sm 尺寸可見	`sx={{ display: { xs: 'none', sm: 'block', md: 'none' } }}`
僅在 md 尺寸可見	`sx={{ display: { xs: 'none', md: 'block', lg: 'none' } }}`
僅在 lg 尺寸可見	`sx={{ display: { xs: 'none', lg: 'block', xl: 'none' } }}`
僅在 xl 尺寸可見	`sx={{ display: { xs: 'none', xl: 'block' } }}`

在寬於 md 尺寸的螢幕上隱藏

在小於 md 尺寸的螢幕上隱藏

<Box sx={{ display: { xs: 'block', md: 'none' }}}>
  hide on screens wider than md
</Box>
<Box sx={{ display: { xs: 'none', md: 'block' }}}>
  hide on screens smaller than md
</Box>

列印時顯示

僅螢幕顯示 (僅在列印時隱藏)

僅列印 (僅在螢幕上隱藏)

<Box sx={{ display: 'block', displayPrint: 'none' }}>
  Screen Only (Hide on print only)
</Box>
<Box sx={{ display: 'none', displayPrint: 'block' }}>
  Print Only (Hide on screen only)
</Box>

溢位

無法滾動，溢位已隱藏

試著滾動這個溢位自動方塊

<Box component="div" sx={{ overflow: 'hidden' }}>
  Not scrollable, overflow is hidden
</Box>
<Box component="div" sx={{ overflow: 'auto' }}>
  Try scrolling this overflow auto box
</Box>

文字溢位

Lorem Ipsum 僅為範例文字

<Box component="div" sx={{ textOverflow: 'clip' }}>
  Lorem Ipsum is simply dummy text
</Box>
<Box component="div" sx={{ textOverflow: 'ellipsis' }}>
  Lorem Ipsum is simply dummy text
</Box>

可見性

可見容器不可見容器

<Box component="div" sx={{ visibility: 'visible' }}>
  Visible container
</Box>
<Box component="div" sx={{ visibility: 'hidden' }}>
  Invisible container
</Box>

空白字元

自 1500 年代以來，Lorem Ipsum 一直是業界標準的範例文字。

<Box component="div" sx={{ whiteSpace: 'nowrap' }}>
  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 '@mui/system';

導入名稱	屬性	CSS 屬性	主題鍵
`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