セマンティックUI対応の固定サイドバー

Question

セグメンテーションの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> 

セマンティック-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; 
}