问题描述

我对语义-UI-Reaction还不熟悉，一直在尝试实现此布局。

查看this fiddle

这是我所能达到的最接近的结果。这两个组件都有可滚动的区域(需要)，但我的主要问题是，在内容中滚动时，侧边栏不会保持固定，滚动到侧边栏底部时，下方会有空白。

有什么想法吗？

相关组件代码如下：

  <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技能不足以解决如何使用侧边栏的问题。

推荐答案

我实际上是用你的小提琴让我的小提琴工作的！谢谢：)

if (menuMobile) {
    return (
        <Sidebar.Pushable style={{ transform: "none" }} as={Segment}>
            <Sidebar
                as={Menu}
                style={{
                    position: "fixed",
                    top: "0px",
                    bottom: "0px",
                    overflowY: "auto",
                }}
                animation="overlay"
                icon="labeled"
                inverted
                onHide={() => setVisible(false)}
                vertical
                visible={visible}
                width="thin"
            >
                <Menu.Item as="a">
                    <Icon name="home" />
                    Home
                </Menu.Item>
                <Menu.Item as="a">
                    <Icon name="gamepad" />
                    Games
                </Menu.Item>
                <Menu.Item as="a">
                    <Icon name="camera" />
                    Channels
                </Menu.Item>
            </Sidebar>

            <Sidebar.Pusher dimmed={visible}>
                <Visibility
                    onBottomPassed={() => {
                        setMenuFixed(true);
                        console.log("BOTTOM PASSED!");
                    }}
                    onBottomVisible={() => {
                        setMenuFixed(false);
                        console.log("VISIBLE");
                    }}
                    once={false}
                >
                    <Menu
                        borderless
                        //stackable
                        fixed={menuFixed ? "top" : undefined}
                        style={menuFixed ? fixedMenuStyle : menuStyle}
                    >
                        <Container>
                            <Menu.Item as="a" href="/dashboard" header>
                                <Image
                                    size="mini"
                                    src={process.env.PUBLIC_URL + "/Flaw-logo-notext.png"}
                                    style={{ marginRight: "1.5em" }}
                                />
                                Conference System
                            </Menu.Item>

                            <Menu.Menu position="right">
                                <Menu.Item as="a" onClick={() => setVisible(true)}>
                                    <Icon name="sidebar" />
                                </Menu.Item>
                            </Menu.Menu>
                        </Container>
                    </Menu>
                </Visibility>

                {children}
            </Sidebar.Pusher>
        </Sidebar.Pushable>
    );
}

这篇关于语义-用户界面反应固定的侧边栏和导航栏：无法获得良好的侧边栏和内容滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！