Как свернуть реагирующую загрузочную панель аккордеона по горизонтали? - PullRequest
Новая
       9

Как свернуть реагирующую загрузочную панель аккордеона по горизонтали?

0 голосов
/ 08 октября 2018

Я работаю с компонентом Panel со страницы React-Bootstrap здесь - https://react -bootstrap.github.io / components / panel / - и я хотел бы использовать их функцию аккордеона с предупреждениемчто тело панели (Panel.Body) открывается горизонтально (открывается справа от Panel. Отображаемые заголовки).

Вот один из примеров на их странице: 

const PanelGroup = ReactBootstrap.PanelGroup;
const Panel = ReactBootstrap.Panel;

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <PanelGroup accordion id="accordion-uncontrolled-example">
        <Panel style={{ display: 'flex' }} eventKey="1">
          <Panel.Heading style={{ margin: '0 2% 0 0' }}>
            <Panel.Title toggle>Panel heading 1</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </Panel.Body>
        </Panel>
        <Panel style={{ display: 'flex' }} eventKey="2">
          <Panel.Heading style={{ margin: '0 2% 0 0' }}>
            <Panel.Title toggle>Panel heading 2</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </Panel.Body>
        </Panel>
        <Panel style={{ display: 'flex' }} eventKey="3">
          <Panel.Heading style={{ margin: '0 2% 0 0' }}>
            <Panel.Title toggle>Panel heading 3</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </Panel.Body>
        </Panel>
      </PanelGroup>
    )
  }
}
ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div id='root'>
  Come On Work!
</div>

Я добавил display: flex, чтобы обернуть панели, хотя я не получаю желаемый макет здесь. Скорее , чем расширение в линию, с телом, имеющим тот же вертикальный флеш, что и его собственный заголовок , мне бы хотелось, чтобы панель всегда располагалась вертикально вертикально с заголовком панели 1, независимо от того, какая панельэто было то, что было открыто.

Кроме того, я бы хотел, чтобы при открытии панели заголовок панели оставался такой же ширины, а не уменьшался до очень малой ширины.

Очевидно, я не уверен, еслиРеактивный компонент для начальной загрузки является подходящим инструментом для этого, или если я должен создать свой собственный инструмент для горизонтального аккордеона (хотя я не совсем уверен, как это сделать).Это тоже часть того, о чем я прошу!

Как всегда, спасибо за любую помощь.

1 Ответ

0 голосов
/ 11 октября 2018

хорошо создал этот рабочий фрагмент, где панели работают так же, как в примерах реакции-начальной загрузки.

Но не уверен, что я понимаю, что именно вы ищете визуально?

вы хотите вместо эффекта «сползти вниз» при переключении на слайд вправо?

как именно?у вас есть заголовок панели как блок, так что содержимое будет соответствовать? 

const PanelGroup = ReactBootstrap.PanelGroup;
const Panel = ReactBootstrap.Panel;


class PanelHorizontal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }
  
  render() {
    const classesNames = ['panelHorizontal'];
    if (this.state.visible){
      classesNames.push('slideIn');
    } else {
      classesNames.push('slideOut');
    }
    return (
      <div>
        <h1
          className="title"
          onClick={()=>this.setState({visible: !this.state.visible})}
        >click to toggle</h1>
        
        <div className={classesNames.join(' ')}>
          content here
        </div>
      </div>
    );
  };
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <PanelHorizontal />
    )
  }
}
ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);
.panelHorizontal {
  width: 220px;
  transform: translateX(-220px);
  transition: transform 400ms ease-in;
}
.panelHorizontal.slideIn {
  transform: translateX(0);
}
.panelHorizontal.slideOut {
  transform: translateX(-220px);
}

.title {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div id='root'>
  Come On Work!
</div>
...