Фиксированная боковая панель Semantic-UI-react

Выполните поиск в Google, выполните поиск на странице документации и проблем семантического пользовательского интерфейса и выполните поиск в 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 или любой из пунктов меню position: fixed; тоже не работает.


reactjs semantic-ui-react semantic-ui
person Argonautic    schedule 05.09.2017    source источник

Ответы (5)


arrow_upward
11
arrow_downward

Мне удалось добиться липкой боковой панели с помощью этого ответа .

По сути, в нем говорится, что для того, чтобы иметь фиксированную боковую панель, которая прилипает к нашей странице с бесконечной прокруткой, мы должны удалить атрибут преобразования в родительском контейнере. Причина в том, что преобразование изменяет контекст позиционирования с области просмотра на повернутый элемент. В результате «фиксированный» дочерний элемент ведет себя так, как будто он имеет «абсолютное» позиционирование.

Я добавил это в файл 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;
}

Это решение предназначено для базовой библиотеки semantic-ui. Поскольку для semantic-ui-react требуется semantic-ui, это работает и для боковых панелей semantic-ui-react.

person GloriousLemon    schedule 09.06.2018
comment
Ага! Добавьте semantic/src/modules/sidebar.overrides, а затем gulp npx build-css. Очень полезный ответ: у @GloriousLemon есть правильный ответ. - person bobleeswagger; 24.02.2020
comment
+1. transform:'none' - это ключ согласно github.com/Semantic-Org/Semantic -UI-React / issues / 2897. Для тех, кто не хочет изменять файл CSS Semantic UI и / или устанавливать Gulp, вы можете добавить модификацию CSS к элементу: <Sidebar.Pushable style={{transform: 'none'}}> - person ZAR; 09.05.2020

arrow_upward
1
arrow_downward

Я использовал классы из модуля semantic-ui Sidebar, чтобы создать желаемую фиксированную боковую панель. Если вам нужен более 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;
}
person Alireza    schedule 07.09.2017

arrow_upward
1
arrow_downward

Попробуйте с кодом ниже.

<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>
person Shan    schedule 10.08.2018
comment
Это должен быть принятый ответ. Также вы можете изменить его на animation='push', если хотите получить от него стиль приборной панели. - person MattSom; 05.03.2020

arrow_upward
1
arrow_downward

Все проще!

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

Думаю, вы сами поймете, почему это работает.

person OrangeBox33    schedule 11.03.2020

arrow_upward
0
arrow_downward

Вам нужно будет сделать это вручную с помощью 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;
}
person codejockie    schedule 05.09.2017