[Ant Design] useBreakpoint, Sider 옵션
Post

[Ant Design] useBreakpoint, Sider 옵션

10/05/2022 04/07/2022
Da-Bin Jeong
1

useBreakpoint Hook

useBreakpoint

  • Ant Design의 Grid 안에는 useBreakpoint 훅이 들어있다.
  • useBreakpoint Hook 안에 다시 xs, sm, md, lg, xl, xxl로 브레이크 포인트가 지정되어 있어서 Hook을 통해 간단하게 브라우저 사이즈에 따른 레이아웃 옵션을 줄 수 있다.

사용하기

  1. Grid import 하기
  2. useBreakpoint 변수에 집어넣기
  3. 크기도 변수에 집어넣기 (ex. lg, xs, sm…)
import { Grid, Tag } from 'antd';
const { useBreakpoint } = Grid;

const Component = () => {
  const {lg} = useBreakpoint();
  const myFontSize = lg ? '36px' : '24px';
  return (
    <Text type={"secondary"} style={{fontSize: myFontSize}}>Message to {userName}</Text>
  )
}

Sider를 숨기면 토글 버튼이 자동 추가!

  • Sider의 collapsedWidth 옵션이 있다.
  • 이 옵션의 넓이를 0으로 설정해주면 Sider가 보이지 않게 되고 다시 보이게 하는 토글 버튼이 생긴다.
  • 이 토글 버튼을 숨기고 싶다면 trigger="null"이라는 옵션을 주면 사라짐!

Reference

TIL, AntDesign