reactjs – Semantic-UI-react固定侧边栏

发布时间：2020-12-15 09:36:30 所属栏目：百科来源：网络整理

导读：用Google搜索,在语义ui的文档和问题页面中搜索,并在stackoverflow中搜索.找不到答案. 在Semantic-ui-react中,如何制作其内容固定在屏幕上的侧边栏？我现在拥有的是： Sidebar.Pushable as={Segment} Sidebar id="sidebar" as={Menu} animation="overlay" dir

用Google搜索,在语义ui的文档和问题页面中搜索,并在stackoverflow中搜索.找不到答案.

在Semantic-ui-react中,如何制作其内容固定在屏幕上的侧边栏？我现在拥有的是：

<Sidebar.Pushable as={Segment}>
    <Sidebar
        id="sidebar"
        as={Menu}
        animation="overlay"
        direction="right"
        visible={this.state.visible}
        vertical
        inverted
    >
        {this.getMenuItems()}
    </Sidebar>
    <Sidebar.Pusher>
        <Route path="/" component={Filler} />
    </Sidebar.Pusher>
</Sidebar.Pushable>

在语义 – 用户反应文档中似乎没有任何单词,并使Sidebar.Pushable,Sidebar或任何菜单项位置：固定;似乎也没有用.

解决方法

在这个 answer的帮助下,我能够获得一个粘性侧边栏.

基本上,它声明为了有一个固定的侧边栏坚持我们的无限滚动页面,我们必须删除transform属性
在父容器上.推理是因为变换将定位上下文从视口更改为
旋转元素.结果,“固定”子元素表现得好像具有“绝对”定位.

我将其添加到sidebar.overrides文件中

/* Page Context */
.pushable:not(body) {
  transform: none;
}

.pushable:not(body) > .ui.sidebar,.pushable:not(body) > .fixed,.pushable:not(body) > .pusher:after {
  position: fixed;
}

此解决方案适用于基本语义库.由于语义 – ui-react需要语义ui,因此最终也适用于语义 – ui-react边栏.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!