语义 UI React：固定边栏 & header

Question

我正在尝试创建一个 header 和边栏，其中 header 位于边栏的左侧，而不是像下图那样重叠。

我已经在不同的文件中分别创建了侧边栏和 Header 组件，并且正在导入它们以呈现到 App.js 文件中，如下所示：

App.js:

render() {    
  return (    
    <div className='fp-wrapper'>
        <AppSidebar />
          <div className='fp-panel-main'>
            <AppHeader />
        </div>
    </div>
  );
}

问题是这两个组件被渲染到彼此之上（见屏幕截图）。有什么方法可以单独构建这些组件并将它们组合在一起吗？

我发现解决这个问题的一种方法是将组件直接构建到侧边栏（请参阅 Sidebar.Pusher 和文本资料），它正确地呈现在侧边栏的右侧，而 header正在重叠。

边栏：

render() {
  const { activeItem } = this.state
  return (
    <Sidebar.Pusher>    
      <Sidebar
        as={Menu}
        animation='push'
        direction='left'
        icon='labeled'
        inverted
        visible='true'
        vertical
        width='thin'
      >
      <Menu.Item as='a'>
        <Icon name='home' />
        Lexis
      </Menu.Item>
      <Menu.Item as='a'>
        Page 1
      </Menu.Item>
      <Menu.Item as='a'>
        Page 2
      </Menu.Item>
      </Sidebar>

      <Sidebar.Pusher>  
             Stuff
      </Sidebar.Pusher>

Answer 1

一种方法是将 <AppSidebar> 包裹在 <div className="sidebar"> 中，然后使用 display: flex 并排显示它们，就像这样。

render(){
  return (
    <div className='fp-wrapper'>
      <div className="sidebar">
        <AppSidebar />
      </div>
      <div className='fp-panel-main'>
        <AppHeader />
      </div>
    </div>
  );
}

并在其中添加 CSS

.fp-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
  width: 30%;
}
.fp-panel-main {
  width: 70%;
}

注意： 您还可以将类名或 ID 添加到 <SideBar.Pusher>，并且不需要将 <AppSideBar /> 与 <div className="sidebar">.

语义 UI React：固定边栏 & header

Semantic UI React: fixed sidebar & header

javascript

reactjs

semantic-ui-react