时间戳

首页 > 解决方案 > 如何水平折叠 react-bootstrap 手风琴面板？

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

问题描述

我正在使用来自 React-Bootstrap 页面的 Panel 组件 - https://react-bootstrap.github.io/components/panel/ - 我想使用他们的手风琴功能和面板主体（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 垂直齐平，而不是内联扩展，主体与其自己的标题具有相同的垂直齐平，无论单击打开的是哪个面板。

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

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

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

标签： javascriptreactjsreact-bootstrap

解决方案

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

推荐阅读