反應工具箱中的嵌套抽屜/佈局

Question

如何實現嵌套抽屜佈局？

LOGO | Nav-Items-Here 
------------------------- 
Page Header 
------------------------- 
Drawer | Content 
/Sidebar| 
     | 
     | 

我試過使用嵌套佈局，但它不起作用。抽屜始終固定在窗口的頂部。我的代碼如下所示（簡化，以消除複雜性等反應路由器）：

 <Layout> 
     <Panel> 
      <DomainPage /> 
     </Panel> 
     </Layout> 

DomainPage

<div> 
    <header styleName="pageHeader.header pageHeader.headerNoBorder"> 
     <h1 styleName="pageHeader.headerText">{this.props.domain.get("name")}</h1> 
    </header> 

    <Tabs theme={theme} index={this.state.index} onChange={this.handleTabChange}> 
     <Tab label="Intents"> 
     <DomainIntentsTab /> 
     </Tab> 
     <!-- ... --> 
    </Tabs> 
    </div> 

DomainIntentsTab

<Layout> 
    <Panel> 
     <NavDrawer pinned active> 
     Test 
     </NavDrawer> 
    </Panel> 
    </Layout> 

Answer 1

測試下面的代碼在react-toolbox playground

class LayoutTest extends React.Component { 
state = { 
    drawerActive: false 
}; 

toggleDrawerActive =() => { 
    this.setState({ drawerActive: !this.state.drawerActive }); 
}; 

render() { 
    return (
     <Layout> 
     <Panel> 
      {/* DomainPage */} 
      <div> 
      <header> 
       <h1>Header</h1> 
      </header> 
      <Tabs> 
       <Tab label="Intents"> 
       {/* DomainIntentsTab */} 
       <Layout> 
        <Panel> 
        <NavDrawer active={this.state.drawerActive} onOverlayClick={ this.toggleDrawerActive }> 
         <p>Navigation, account switcher, etc. go here.</p> 
        </NavDrawer> 
        <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}> 
         <Button label="toggle drawer" onClick={ this.toggleDrawerActive } primary raised/> 
         <h1>Main Content</h1> 
         <p>Main content goes here.</p> 
        </div> 
        </Panel> 
       </Layout> 
       </Tab> 
      </Tabs> 
      </div> 
     </Panel> 
     </Layout> 
    ); 
    } 
} 

return <LayoutTest />; 

您可能會發現navdrawer-closed狀態下NavDrawer的box-shadow可見。你可以用CSS糾正這種

編輯

固定側菜單：按

this，NavDrawer和Panel是兄弟;所以你可以修改DomainIntentsTab部分如下。

注意：不要忘記在NavDrawer

<Tab label="Intents"> 
    {/* DomainIntentsTab */} 
    <Layout> 
     <NavDrawer pinned active={this.state.drawerActive} onOverlayClick={ this.toggleDrawerActive }> 
      <p>Navigation, account switcher, etc. go here.</p> 
     </NavDrawer> 
     <Panel> 
      <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}> 
       <Button label="toggle drawer" onClick={ this.toggleDrawerActive } primary raised/> 
       <h1>Main Content</h1> 
       <p>Main content goes here.</p> 
      </div> 
     </Panel> 
    </Layout> 
</Tab>