Material-ui hidden

wjdym·2020년 5월 31일
0

material-ui

목록 보기
1/2

<Hidden>

Breakpoint

Material-ui에는 화면 크기에 따라 Breakpoint가 있다.

xs | sm | md | lg | xl

xs (extra-small) : 0px ~ 600px
sm (small) : 600px ~ 960px
md (medium): 960px ~ 1280px
lg (large) : 1280px ~ 1920px
xl (extra-large) : 1920px ~


다양한 Breakpoint일 때 (ex: xsUp or mdDown )
하나의 Breakpoint일 때 (ex: only="xs" )


Up & Down

예시1.
smUp

<Hidden smUp>

sm부터 커지는 건 안 보인다.(hidden)
sm보다 작은 xs에서는 보이지만 sm부터 시작해서 md, lg, xl에서는 보이지 않는다.


예시2.
mdDown

<Hidden mdDown>

md부터 작아지는 건 안 보인다.(hidden)
제일 작은 xs부터 md까지 안보이지만 그보다 큰 lg, xl에서는 보인다.


예시3.
only="xs"

<Hidden only="xs">

xs에서만 안보인다.



만약 1280px 이상의 큰 모니터 화면으로는 사이드메뉴바가 보이는데 600px이하의 모바일 화면에서는 사이드메뉴바가 보이지 않길 원한다면,

<Hidden only='xs'
profile
에러 타파!

0개의 댓글