语义-用户界面反应固定的侧边栏和导航栏:无法获得良好的侧边栏和内容滚动

本教程将介绍语义-用户界面反应固定的侧边栏和导航栏:无法获得良好的侧边栏和内容滚动的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

语义-用户界面反应固定的侧边栏和导航栏:无法获得良好的侧边栏和内容滚动 教程 第1张

问题描述

我对语义-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>
 );
}

好了关于语义-用户界面反应固定的侧边栏和导航栏:无法获得良好的侧边栏和内容滚动的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。