Скрытие боковой панели semanti c ui реагирует на рабочий стол или планшет - PullRequest
Новая
       67

Скрытие боковой панели semanti c ui реагирует на рабочий стол или планшет

1 голос
/ 13 июля 2020 

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

Я реализую реакцию semanti c ui с моим приложением, и у меня проблема с компонентом боковой панели. Я создал кнопку переключения на своей панели инструментов, которая видна только на мобильных устройствах. Кнопка переключения запускает боковую панель, и вы не можете вызвать боковую панель с рабочего стола или планшета. Теперь, когда я вызываю боковую панель из мобильного представления и изменяю размер своего браузера на вид рабочего стола, боковая панель все еще отображается. Как я могу предотвратить это, чтобы боковая панель всегда была скрыта в режиме рабочего стола или планшета.

Я нашел похожий вопрос здесь , но ответа нет.

Я согласен функция отображения боковой панели на панели инструментов и значок переключения, который виден только на мобильном устройстве, запускает боковую панель.

1 Ответ

0 голосов
/ 13 июля 2020

Допустим, вы хотите скрыть боковую панель для планшета и телефона. Вы можете использовать реагирующий тег semanti c в соответствии с вашими потребностями. 

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