反应工具箱中的嵌套抽屉/布局

Question

如何实现嵌套抽屉布局？

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

我尝试使用嵌套布局，但它不起作用。抽屉总是固定在窗口的顶部。我的代码看起来像这样（简化以消除像反应路由器这样的复杂性）：

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

域名页面

  <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 的 box-shadow 在 navdrawer 关闭状态下可见。您可以使用 CSS 更正此问题

编辑

固定侧边菜单：

根据this、NavDrawer 和Panel 是兄弟姐妹；所以你可以修改DomainIntentsTab部分如下。

注意：不要忘记在NavDrawer上添加pinned

<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>