語義UI反應固定邊欄

已搜索，在語義UI的文檔和問題頁面內搜索，並在計算器中搜索。找不到答案。語義UI反應固定邊欄

在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，側欄，或任何菜單項的位置：固定;似乎也不起作用。

來源

2017-09-05 Argonautic

您可以使用文檔中的Sticky組件。

來源

2017-09-05 16:38:28 bennygenel

謝謝，bennygenel。將側邊欄組件本身粘貼到粘滯狀態會導致側邊欄一旦消失就會撞到視口頂部，而將整個sidebar.pushable包裹在粘性層中會導致頁面從不滾動到側邊欄底部。文件不太清楚 - 我應該怎樣做才能解決問題？ – Argonautic

對不起，但我對Semantic-UI沒有太多經驗。我只知道有一個Sticky組件，只是想告訴你一個方法。我建議你試試看看你可以用什麼道具來解決這個問題。 – bennygenel

您需要手動使用一些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-05 16:45:07

我使用的類從semantic-ui的Sidebar模塊來創建期望的固定側欄。如果您想要更多的Component（ish）代碼，則應該用其通訊夥伴Sidebar.Pusher組件取代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-07 18:23:28 Alireza

語義UI反應固定邊欄

回答

相關問題