如何水平折叠反应引导手风琴面板?

Question

我正在使用React-Bootstrap页面中的面板组件 - 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

很好地创建了这个工作片段，其中面板的工作方式就像在 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>