隱藏語義 ui 的側邊欄在桌面或平板電腦視圖中做出反應

Question

 < Sidebar.Pushable as = { Segment } > < Sidebar as = { Menu} animation = 'overlay' icon = 'labeled' inverted onHide = { this.handleSidebarHide } vertical visible = { this.state.visible } width = 'thin' className = "sidecolor" > < Menu.Item as = 'a' > < Icon name = 'home' / > Home < /Menu.Item> <Menu.Item as = 'a' > < Icon name = 'gamepad' / > Games </Menu.Item> <Menu.Item as = 'a' > < Icon name = 'camera' / > Channels </Menu.Item> < /Sidebar> < Sidebar.Pusher dimmed = { this.state.visible } > < Toolbar show = { this.handleShowClick}/> <div className = "heading" style = { { minHeight: "93vh", textAlign: "center" } } > { view } < div style = { { height: "50%" } } > { formDialog } < /div> < /div> < Footer / > < /Sidebar.Pusher> < /Sidebar.Pushable>

 <div onClick={props.show} className="toggle"> <Icon name="sidebar" /> </div>

我正在實現語義 ui 與我的應用程序反應，但側邊欄組件有問題。 我在工具欄中創建了一個切換按鈕，該按鈕僅在移動設備中可見。 切換按鈕觸發側邊欄，您無法從桌面或平板電腦視圖觸發側邊欄。 現在，當我從移動視圖觸發側邊欄並將瀏覽器調整為桌面視圖時，側邊欄仍然可見。 如何防止它在桌面或平板電腦模式下始終隱藏側邊欄。

我在這里發現了一個類似的問題，但沒有答案。

我通過 function 將側邊欄顯示到工具欄中，並且僅在移動設備中可見的切換圖標觸發側邊欄。

Answer 1

假設您想隱藏平板電腦和手機的側邊欄。 您可以根據需要使用 react 語義響應標簽。

<Sidebar.Pushable as={ Segment }>
  <Responsive as={Segment} minWidth={768}>
    <Sidebar as={ Menu } animation='overlay' icon='labeled' inverted onHide={ 
       this.handleSidebarHide } vertical visible={
      this.state.visible } width='thin' className="sidecolor">
      <Menu.Item as='a'>
        <Icon name='home' />
          </Sidebar.Pusher>
          Home 
      </Menu.Item> 
    </Sidebar> 
  </Responsive>
  <Sidebar.Pusher dimmed={ this.state.visible }>
  </Sidebar.Pusher> 
</Sidebar.Pushable>