[英]React JS: Collapsible sidebar
I am using React JS to create a responsive UI.我正在使用 React JS 创建响应式 UI。 I want to create a collapsible sidebar like the following:我想创建一个可折叠的侧边栏,如下所示:
So when I click the vertical bar(Graph information) it should expand like the second picture.因此,当我单击垂直条(图形信息)时,它应该像第二张图片一样展开。 I have seen some example like in Jsfiddle
Sample code .But here, they have used a static button to control the collapse.我在Jsfiddle
Sample code 中看到了一些例子。但是在这里,他们使用了一个静态按钮来控制折叠。 Is there any library that I can use?有没有我可以使用的库? Or any code suggestion?或者任何代码建议?
I am learning React JS.我正在学习 React JS。 So any help or suggestion will be appreciated.因此,任何帮助或建议将不胜感激。
You can have a button just like in the fiddle, but have it in the sidebar component.您可以像在小提琴中一样拥有一个按钮,但在侧边栏组件中拥有它。
I've updated the fiddle我已经更新了小提琴
The beauty of React is separating the state. React 的美妙之处在于分离状态。 I think like this:我是这样想的:
So Parent
becomes (now passing in the function to the SideBar
)所以Parent
变为(现在将函数传递给SideBar
)
var Parent = React.createClass({
getInitialState: function(){
return {sidebarOpen: false};
},
handleViewSidebar: function(){
this.setState({sidebarOpen: !this.state.sidebarOpen});
},
render: function() {
return (
<div>
<Header onClick={this.handleViewSidebar} />
<SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
<Content isOpen={this.state.sidebarOpen} />
</div>
);
}
});
and the SideBar
becomes (adding a button that calls that function): SideBar
变为(添加一个调用该函数的按钮):
var SideBar = React.createClass({
render: function() {
var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
return (
<div className={sidebarClass}>
<div>I slide into view</div>
<div>Me too!</div>
<div>Meee Threeeee!</div>
<button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
</div>
);
}
});
I have implemented the side drawer without using any of these packages like slide-drawer or react-sidebar.我已经实现了侧抽屉,而没有使用任何这些包,如滑动抽屉或反应侧边栏。
You can check out Side Drawer in my GitHub account GhostWolfRider .您可以在我的 GitHub 帐户GhostWolfRider 中查看Side Drawer 。
Output Images for reference:输出图像供参考:
Before Slide:幻灯片前:
After Slide:滑动后:
You can use the React Offcanvas component to get this working.你可以使用 React Offcanvas 组件来让它工作。 Here is the link to get install the offcanvas component.这是安装 offcanvas 组件的链接。
https://github.com/vutran/react-offcanvas https://github.com/vutran/react-offcanvas
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.