Question

我正在尝试创建一个标题和侧边栏，其中标题位于侧边栏的左侧，并且不像下面的图片那样覆盖。

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

App.js：

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

问题在于这两个组件正在彼此顶部渲染（请参见屏幕截图）。有什么办法可以分别构建这些组件并使它们装配在一起吗？

我发现解决此问题的一种方法是将组件直接构建到侧边栏（请参见Sidebar.Pusher和text Stuff），该边栏将正确显示在侧边栏的右侧，而标题已重叠。

侧边栏：

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%;
}

注意：您还可以在<SideBar.Pusher>上添加className或id，而无需用<AppSideBar />包裹<div className="sidebar">。

语义UI React：固定的侧边栏和标题

1 个答案: