隐藏语义 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 与我的应用程序反应，但我的侧边栏组件有问题。 我在工具栏中创建了一个切换按钮，该按钮仅在移动设备中可见。切换按钮触发侧边栏，您无法从桌面或平板电脑视图触发侧边栏。现在，当我从移动视图触发侧边栏并将浏览器调整为桌面视图时，侧边栏仍然可见。如何防止它在桌面或平板电脑模式下始终隐藏侧边栏。

我发现了一个类似的问题here，但没有答案。

我将显示侧边栏的功能传递到工具栏中，并且仅在移动设备中可见的切换图标触发侧边栏。

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>