Question

我对语义的反应很新，并且试图实现这种布局。

这是我能够实现的最接近的。这两个组件具有可滚动区域（所需），但我的主要问题是侧边栏在滚动内容时不会保持固定，并且滚动到侧边栏的底部，下方有空白。

有什么想法吗？

以下是相关的组件代码：

  <div style={{paddingTop: '51px'}}>
    <Menu size="massive" fixed="top" inverted borderless >
      <Menu.Item header onClick={()=>{}}>
        App Name and Logo
      </Menu.Item>
      <Menu.Item onClick={()=>{}}>
        <Icon name="bars"/>
      </Menu.Item>
      <Menu.Menu position="right" style={{fontSize: '1rem'}}>
        <Menu.Item onClick={()=>{}}><Icon name="sign in"/>log in</Menu.Item>
      </Menu.Menu>

    </Menu>
    <div>
      <Sidebar.Pushable as={Segment} >
        <Sidebar as={Menu} borderless
                 animation='push' visible={true} vertical inverted>
          <Menu.Item name='home' onClick={()=>{}}>
            <Icon name='home'/>
            <span>Home</span>
          </Menu.Item>
          <Menu.Item name='users' onClick={()=>{}}>
            <Icon name='users'/>
            <span>Users</span>
          </Menu.Item>
          <Menu.Item name='repos' onClick={()=>{}}>
            <Icon name='fork' />
            <span>Repositories</span>
          </Menu.Item>
          {sidebarArr}
        </Sidebar>
        <Sidebar.Pusher >
          <Segment basic>
            {contentArr}

          </Segment>
        </Sidebar.Pusher>
      </Sidebar.Pushable>

    </div>
  </div>

更新

新fiddle。我大多成功地获得了理想的行为;我不再使用补充工具栏组件而是使用简单的菜单。我的初学CSS技能还不足以弄清楚如何使用补充工具栏。

Answer 1

似乎我们都在同样的问题上挣扎（在semantic-ui组中看到你的评论）。我还修复了顶部菜单，它应该可以与这个侧边栏叠加。最后我解决了一个问题，并决定重新创建它。

我不保证这完全符合您的要求，但至少可以了解继续前进的方向。

源代码＆amp;示例可以找到here

semantic-ui-react固定侧边栏和导航栏：无法获得侧边栏和内容以便很好地滚动

1 个答案: