如何水平折叠 react-bootstrap 手风琴面板？

Question

我正在使用来自 React-Bootstrap 页面的 Panel 组件 - https://react-bootstrap.github.io/components/panel/ - 我想使用他们的手风琴功能，但需要注意的是面板主体 (Panel.Body) 水平打开（打开到右侧显示的 Panel.Headings）。

这是他们页面中的示例之一：

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 垂直齐平，我希望它，不管点击打开的是哪个面板。

此外，当面板打开时，我希望面板标题保持相同的宽度，而不是缩小到非常小的宽度。

显然我不确定 react-bootstrap Panel 组件是否是正确的工具，或者我是否应该创建自己的自定义水平手风琴工具（虽然不太确定如何做到这一点）。这也是我要问的一部分！

一如既往地感谢您的帮助。

Answer 1

很好地创建了这个工作的 sn-p，其中面板的工作方式类似于 react-bootstrap 示例。

但不确定我是否了解您在视觉上究竟在寻找什么？

您想要在切换到右滑时而不是滑下效果？

究竟如何？您将面板标题作为一个块，因此内容适合放在哪里？

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>