5

谷歌搜索，在语义 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>

在semantic-ui-react 文档中似乎没有任何词，并使 Sidebar.Pushable、Sidebar 或任何菜单项位置：固定；似乎也不起作用。

4

5 回答 5

11

在这个答案的帮助下，我能够实现一个粘性侧边栏。

基本上，它声明为了有一个固定的侧边栏粘在我们的无限滚动页面上，我们必须删除父容器上的 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 库。由于语义-ui-react 需要语义-ui，这最终也适用于语义-ui-react 侧边栏。

于 2018-06-09T03:57:22.483 回答
2

试试下面的代码。

<Sidebar as={Menu} animation='overlay' icon='labeled' inverted vertical visible width='wide'>
       <Menu.Item as={Link} to="/admin">
          <Icon name='building' />
          Rubykraft
       </Menu.Item>
       <Menu.Item as='a'>
          <Icon name='user' />
          Shan
       </Menu.Item>
       <Menu.Item as='a'>
         <Icon name='user' />
         Vishnu
       </Menu.Item>
</Sidebar>
于 2018-08-10T05:14:34.533 回答
1

我使用semantic-ui'sSidebar模块中的类来创建所需的固定侧边栏。如果您想要更多Component（ish）代码，则应将该pusher类替换为其对应的Sidebar.Pusher组件。

这是我的代码：

import React, { Component } from 'react'
import { Dropdown, Icon, Input, Menu } from 'semantic-ui-react'

export default class MySidebar extends Component {
    state = {}

    handleItemClick = (e, { name }) => this.setState({ activeItem: name })


    componentDidMount() {}

    render() {
        const { activeItem } = this.state

        return(
            <div className='pusher'>
                <div className='full height'>
                    <div className='toc'>
                        <Menu className='inverted vertical left fixed'>
                            <Menu.Item>
                                Home
                                <Icon name='dashboard' />
                                <Menu.Menu>
                                    <Menu.Item name='search' active={activeItem === 'search'} onClick={this.handleItemClick}>
                                        Search
                                    </Menu.Item>
                                    <Menu.Item name='add' active={activeItem === 'add'} onClick={this.handleItemClick}>
                                        Add
                                    </Menu.Item>
                                    <Menu.Item name='about' active={activeItem === 'about'} onClick={this.handleItemClick}>
                                        Remove
                                    </Menu.Item>
                                </Menu.Menu>
                            </Menu.Item>
                            <Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
                                <Icon name='grid layout' />
                                Browse
                            </Menu.Item>
                            <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick}>
                                Messages
                            </Menu.Item>

                            <Dropdown item text='More'>
                                <Dropdown.Menu>
                                    <Dropdown.Item icon='edit' text='Edit Profile' />
                                    <Dropdown.Item icon='globe' text='Choose Language' />
                                    <Dropdown.Item icon='settings' text='Account Settings' />
                                </Dropdown.Menu>
                            </Dropdown>
                        </Menu>
                    </div>
                    <div className='article'>
                        <div>Content</div>
                    </div>
                </div>
            </div>
        )
    }
}

和风格：

.toc {
    width: 200px;
}

.article {
    margin-left: 210px;
}
于 2017-09-07T18:23:28.943 回答
1

一切都变得更容易了！

<Sidebar.Pusher style={{overflow: 'scroll', height: '100%'}}>

我想你自己会明白为什么会这样。

于 2020-03-11T18:58:01.243 回答
0

您需要使用一些 CSS/SCSS 手动完成。基本上，您需要将高度设置为固定值。 

@media only screen and (max-width: 768px) {
  .ui.wide.left.sidebar, .ui.wide.right.sidebar {
    height: 100vh !important;
    position: absolute;
  }

  .pusher {
    margin-left: 20px;
  }
}

.pushable {
  min-height: 100vh;
}

.ui.wide.left.sidebar, .ui.wide.right.sidebar {
  height: 100vh;
  position: fixed !important;
  bottom: 0px !important;
  top: 0px !important;
}
于 2017-09-05T16:45:07.143 回答