Semantic-UI-react feste Seitenleiste

Question

Haben gegoogelt, in semantischen ui Docs und Probleme Seite gesucht und innerhalb Stackoverflow gesucht. Konnte die Antwort nicht finden.

Innerhalb von Semantic-Ui-reagieren, wie mache ich eine Sidebar, deren Inhalt auf dem Bildschirm fixiert ist? Was ich derzeit habe, ist dies:

<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> 

Es nicht jedes Wort in es in der semantischen-ui-Dokumentation reagieren zu sein scheint, und macht Sidebar.Pushable, Sidebar, oder einer der Menüpunkte Position: Fest; scheint auch nicht zu funktionieren.

Answer 1

Sie können Sticky Komponente aus der Dokumentation verwenden.

Answer 2

Sie müssten es manuell mit einigen CSS/SCSS tun. Grundsätzlich müssen Sie die Höhe auf einen festen Wert einstellen.

@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

habe ich Klassen von semantic-ui ‚s Sidebar Modul verwendet, um die gewünschten festen Seitenleiste zu erstellen. Wenn Sie einen mehr Component (ish) Code möchten, sollten Sie die pusher Klasse mit ihrer entsprechenden Sidebar.Pusher Komponente ersetzen.

Hier ist mein Code:

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> 
     ) 
    } 
} 

Und der Stil:

.toc { 
    width: 200px; 
} 

.article { 
    margin-left: 210px; 
}