Question

我正在使用React-Bootstrap页面的https://react-bootstrap.github.io/components/panel/中的Panel组件，并且我想将它们的手风琴功能与面板主体（Panel.Body）水平打开（向面板右侧。显示的标题。

以下是其页面中的示例之一：

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>

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

1 个答案: