시맨틱 UI 반응식 고정 사이드 바

Question

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> 

의미-UI-반응 문서에서 임의의 단어 것 같다하지 않으며, Sidebar.Pushable, 사이드 바을, 또는 메뉴 항목 위치 중 하나를 내가 현재 가지고하는 것은 이것이다 : 결정된; 어느 쪽이든 작동하지 않는 것 같습니다.

Answer 1

Sticky 구성 요소를 문서에서 사용할 수 있습니다.

Answer 2

일부 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; 
} 

Answer 3

내가 원하는 고정 사이드를 만들 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; 
}