ゼロからのUIの構築、応答サイドバーとヘッダー

これは2番目の記事ですBuilding a UI from scratch シリーズ

- 1 .

- 1 .

- 1 .

生のデモhttps://llorentegerman.github.io/react-admin-dashboard/
リポジトリhttps://github.com/llorentegerman/react-admin-dashboard

応答設計

現時点では、UIは応答しません.

我々はフォローするために敏感なデザインを持っていないので、我々はそれを簡単に、768 pxで1つだけブレークポイントを維持します.だから任意の画面未満768px が考えられるmobile .
The Sidebar が分離されます.Burger button , Desktop Sidebar and Mobile Sidebar .SidebarComponent for Desktop は既に説明されています.この記事では、応答するサイドバーでそれを変換する方法を見ます.
モバイル画面( width <= 768 px )でSidebarComponent 2つの異なる状態を持つことができます.collapsed (デフォルト)あるいはexpanded .

崩壊

この状態では、サイドバー全体が隠されるmainBlock ( see App.js ) スクリーン全体の幅を埋める.
ボタンが必要ですexpand the Sidebar そして、我々はBurgerIcon ハンバーガーのアイコンをコピーするにはclick here ). そのボタンは絶対位置にあるheader :

拡張

この状態で我々はSidebar とoutsideLayer それは半透明の背景を持つ画面の残りの部分を埋めるでしょうSidebar を閉じます.

ヘッドコンポーネント。js

以来Burger button を超えますheader 何かを加える必要があるleft-margin にHeader Title この状況を避けるために

これらは、新しいスタイルの最も重要な部分ですHeaderComponent.js , 見ることができるように、私はモバイルスクリーンのために若干の特別なスタイルを適用するためにメディア質問を含めました:

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

SideBarComponent。js

このコンポーネントにはすべてのロジックが含まれています.

expanded : はstate

isMobile : true 時window.innerWidth <= 768

時Sidebar が拡張され、2つの異なる方法が崩壊するMenuItem またはoutsideLayer . この動作を管理するには、次の2つのメソッドがあります.

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

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

toggleMenu をクリックするとBurger button (サイドバーが崩壊した場合)またはoutsideLayer (サイドバーが拡張された場合).
ここに新しいバージョンのSidebarComponent :
< div >
ここではrenderBurger メソッド: < br/>
<> P >
< div class ="ハイライト"

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

< tag >コンポーネントをラッピング中ですdiv with position: relative , そしてそれはSidebar そうでなければ、以下のようになります.
< P >

あなたがわかるように、我々はbreakpoints 資産simple-flexbox , 例えば、< br/>
<> P >
< div class ="ハイライト"

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

つまり、ifならばwindow.innerWidth <= 768 mainContainerMobile スタイルが適用されます.p >
コードの次の部分を読んで、あなたが我々がいるならば、あなたはそれをSEにしますmobile スクリーンexpanded = false , ジャストザBurger button を返します.expanded = true the Sidebar and outsideLayer が表示されますbr/>
<> P >
< div class ="ハイライト"

{(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>}

これらは新しいスタイルですSidebarComponent.js , チェックオンmobile の位置container はabsolute to overlay the mainBlock と画面全体を入力します.時expanded = false 画面から左にシフトします(left: -255px ), とexpanded = true これは、元の位置にシフト表示されますleft: 0px ). また、transition プロパティを要素の滑らかな表示にします.outsideLayer 画面全体を埋めますが、Sidebar (参照)zIndex ):

<> P >
< div class ="ハイライト"

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
}

< P >View the changes: SidebarComponent.js

< P >View full file: SidebarComponent.js

アプリ。js

私は変更しましたcontainer スクリーンのすべての完全な高さを満たすようにスタイル
<> P >
< div class ="ハイライト"

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

そして、私は、各々で完全なアプリケーションを再レンダリングするために、イベントを含みましたresize :

<> P >
< div class ="ハイライト"

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

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

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

< P >View the changes: App.js

< P >View full file: App.js

このシリーズから新しい記事が来ていますp >
< p >