처음부터 UI, 응답성 사이드바 및 제목 작성

이것은 Building a UI from scratch 시리즈의 두 번째 글입니다.

제1부분:.

제2부분:.

제3부분:.

현장 프레젠테이션: https://llorentegerman.github.io/react-admin-dashboard/
저장소: https://github.com/llorentegerman/react-admin-dashboard

응답식 설계

현재 UI에는 응답 기능이 없습니다. 이렇게 보이길 바랍니다.

우리는 호응적인 디자인이 없기 때문에, 우리는 간단하게 유지할 것이다. 단지 하나의 단점만 768px에 있다.따라서 768px 이하의 모든 화면은 mobile 으로 간주됩니다.Sidebar, Burger button, Desktop Sidebar 및 Mobile Sidebar 구성 요소가 분리됩니다.SidebarComponent에 대해 이미 해명했다.본고에서, 우리는 응답 사이드바에서 그것을 어떻게 변환하는지 볼 수 있다.
이동 화면 (너비 <=768px)Desktop에는 두 가지 다른 상태가 있을 수 있습니다: SidebarComponent (기본값) 또는 collapsed.

축소:

이 상태에서 전체 사이드바는 숨겨지고 expanded see App.js 는 화면의 전체 너비를 채웁니다.
단추 mainBlock 가 필요합니다. expand 를 (햄버거 아이콘 복사 click here 로 사용합니다.이 버튼은 Sidebar 위의 절대 위치에 있습니다.

확대

이 상태에서 BurgerIcon 및 header 를 표시하고 나머지 화면은 반투명 배경으로 채워지며 클릭하면 Sidebar 닫힙니다.

제목 구성 요소.회사 명

outsideLayer 이 Sidebar 를 초과하기 때문에, 이 상황을 피하기 위해 Burger button 에 header 을 추가해야 합니다.

이것은 left-margin 새로운 스타일 중 가장 중요한 부분입니다. 보시다시피 저는 미디어 조회를 포함하여 일부 특수한 스타일을 이동 화면에 적용했습니다.

name: {
    ...,
    '@media (max-width: 768px)': {
        display: 'none' // <--- don't show the name on mobile
    }
},
separator: {
    ...,
    '@media (max-width: 768px)': {
        marginLeft: 12, // <--- less separation on mobile
        marginRight: 12
    }
},
title: {
    ...,
    '@media (max-width: 768px)': {
        marginLeft: 36 <--- to avoid overlapping with Burger button
    },
    '@media (max-width: 468px)': {
        fontSize: 20 <--- new fontSize for small devices. 
    }
}

나는 또한 아이콘 포장에 새로운 스타일을 추가했다.
View the changes: HeaderComponent.js
View full file: HeaderComponent.js

요약 표시줄 구성 요소.회사 명

이 구성 요소는 두 변수에 따라 변경되는 모든 논리를 포함합니다.

Header Title: 스토리지HeaderComponent.js

expanded: state 당 isMobile

확장true 시 두 가지 다른 방법으로 축소하여 일부 window.innerWidth <= 768 를 클릭하거나 Sidebar 를 클릭합니다.이러한 동작을 관리하는 방법은 두 가지가 있습니다.

onItemClicked = (item) => {
    this.setState({ expanded: false });
    return this.props.onChange(item);
}

toggleMenu = () => this.setState(prevState => ({ expanded: !prevState.expanded }));

MenuItem 를 클릭하거나outsideLayer (사이드바가 축소된 경우) 를 클릭하거나toggleMenu (사이드바가 확장된 경우) 를 클릭하면 트리거됩니다.
이것은 Burger button의 새 버전입니다.

이것은outsideLayer 방법:

renderBurger = () => {
    return <div onClick={this.toggleMenu} className={css(styles.burgerIcon)}>
        <IconBurger />
    </div>
}

우리는 SidebarComponent arenderBurger의 구성 요소를 포장합니다. 이것은 div 모든 화면을 채울 수 있도록 하기 위해서입니다. 그렇지 않으면 다음과 같습니다.

보시다시피 저희는 simple-flexbox의position: relative 속성을 사용하고 있습니다. 예를 들어

<Row
    className={css(styles.mainContainer)}
    breakpoints={{ 768: css(styles.mainContainerMobile) }}
>

이것은 응용Sidebarbreakpoints양식을 의미합니다

아래 코드 부분을 읽으면 우리가 window.innerWidth <= 768 화면에서, 그리고 mainContainerMobile 화면에서 mobile 만 나타나고, expanded = false 이면 Burger button 및 expanded = true

{(isMobile && !expanded) && this.renderBurger()}
<Column className={css(styles.container)}
    breakpoints={{ 768: css(styles.containerMobile, expanded ? styles.show : styles.hide) }}>
    ...
</Column>
{isMobile && expanded &&
    <div className={css(styles.outsideLayer)} onClick={this.toggleMenu}></div>}

이것들은 Sidebar에 적용되는 새로운 스타일입니다. outsideLayer에 있는 SidebarComponent.js의 위치가 mobile부터 container까지 있는지 확인하고 전체 화면을 채웁니다.absolute 는 왼쪽으로 이동하여 화면overlay을 벗어나고 mainBlock 이 표시되면 원래 위치로 이동합니다 expanded = false.또한 속성을 보고 요소를 부드럽게 표시할 수도 있습니다.left: -255px 전체 화면이 채워지지만 expanded = true 뒤에 배치됩니다(참조left: 0px:

burgerIcon: {
    cursor: 'pointer',
    position: 'absolute',
    left: 24,
    top: 34
},
container: {
    backgroundColor: '#363740',
    width: 255,
    paddingTop: 32,
    height: 'calc(100% - 32px)'
},
containerMobile: {
    transition: 'left 0.5s, right 0.5s',
    position: 'absolute',
    width: 255,
    height: 'calc(100% - 32px)',
    zIndex: 901
},
mainContainer: {
    height: '100%',
    minHeight: '100vh'
},
mainContainerMobile: {
    position: 'absolute',
    width: '100vw',
    minWidth: '100%',
    top: 0,
    left: 0
},
outsideLayer: {
    position: 'absolute',
    width: '100vw',
    minWidth: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,.50)',
    zIndex: 900
},
hide: {
    left: -255
},
show: {
    left: 0
}

View the changes: SidebarComponent.js

View full file: SidebarComponent.js

응용 프로그램.회사 명

transition 스타일을 변경해서 화면의 모든 높이를 채웠습니다:

container: {
    height: '100%',
    minHeight: '100vh'
}

매번 outsideLayer 완전한 응용 프로그램을 다시 보여주는 이벤트도 포함되어 있습니다:

componentDidMount() {
    window.addEventListener('resize', this.resize);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
}

resize = () => this.forceUpdate();

View the changes: App.js

View full file: App.js

본 시리즈의 새로운 문장이 곧 출시될 것이다

읽어주셔서 감사합니다