Squeezable Material-UI Drawer 컴포넌트를 어떻게 구현하고 페이지 내용에 맞추는 방법

Material-UI Drawer를 ‘열렸을 때 다른 콘텐츠를 ‘압축’하는 방법

CSS와 Material UI에 익숙하다면, 페이지 콘텐츠 위로 슬라이드되지 않고 페이지 콘텐츠 주위에 맞게 적응하는 Material UI Drawer 컴포넌트를 구현하는 방법이 궁금할 수 있습니다. 이 블로그 포스트에서는 이 효과를 구현하는 해결책을 탐색해보겠습니다.

챌린지

기본적으로 Material UI Drawer 컴포넌트는 콘텐츠 레이아웃에 영향을 주지 않고 위로 슬라이드됩니다. 그러나 콘텐츠가 서서히 조정되어 드로어가 열렸을 때 또는 닫혔을 때 동적으로 조정되도록 원할 수 있습니다. 다음 방법을 사용하면 이를 구현할 수 있습니다:

Bootstrap의 행과 컨테이너 사용

프로젝트에서 Bootstrap의 행과 컨테이너를 사용하고 있습니다. 콘텐츠를 압축하거나 확장하기 위해 콘텐츠 컨테이너의 여백과 너비를 조작할 수 있습니다. 아래는 예제 코드 스니펫입니다:

const { Drawer, RaisedButton } = MaterialUI;

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { drawerOpen: false };
  }

  render() {
    const contentStyle = {  transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' };

    if (this.state.drawerOpen) {
      contentStyle.marginLeft = 256;
    }

    return (
      <div>
        <Drawer open={this.state.drawerOpen}>
          <div style={{ textAlign: 'right' }}>
            <RaisedButton onClick={() => this.setState({ drawerOpen: false }) }>X</RaisedButton>
          </div>
          {this.props.children}
        </Drawer>

        <div style={contentStyle}>
          <RaisedButton onClick={() => this.setState({ drawerOpen: true }) }>열기</RaisedButton>
          <p>콘텐츠를 여기에 작성합니다...</p>
        </div>
      </div>
    );
  }
}

이 코드에서는 Material UI Drawer 컴포넌트와 콘텐츠 컨테이너를 포함하는 상위 컴포넌트가 있습니다. 콘텐츠 컨테이너의 스타일은 Drawer 컴포넌트의 상태에 따라 조정됩니다. 드로어가 열렸을 때, 왼쪽 여백(marginLeft) 속성이 256 픽셀로 설정되어 콘텐츠가 오른쪽으로 밀려나갑니다. 이로써 원하는 압축 효과가 만들어집니다.

결론

제공된 코드 스니펫과 설명을 사용하여 동적으로 레이아웃을 조정하는 Material UI Drawer 컴포넌트를 구현할 수 있게 되었을 것입니다. 특정 요구사항과 스타일에 맞게 코드를 사용자 정의할 수 있습니다.

이러한 단계를 따라 가면 Material UI 애플리케이션에서 사용자 경험을 향상시킬 수 있으며 드로어와 페이지 콘텐츠 간의 원활한 통합을 만들 수 있습니다.

이 블로그 포스트를 읽어주셔서 감사합니다. 이 해결책이 유용했기를 바랍니다! 추가 질문이나 제안 사항이 있다면 아래에 댓글을 남겨주세요.

참고 자료 : 

reactjs