使用样式组件的侧边栏切换
使用样式组件的侧边栏切换
在本文中，我们将探讨如何使用样式组件为 Menu / SideBar 创建切换功能。一个 侧边栏切换 是一个按钮，当按下时会生成一个左或右区域 滚动容器 出现或消失。这使得创建一个默认隐藏的侧边栏成为可能，并且可以通过单击按钮来显示。
切换功能通常使用 JavaScript 构建，因为它需要处理点击事件。
但它可以用 styled-components 构建
让我们开始吧
将样式化组件安装到 react App
npm install — 保存样式组件
在 App.js 中 在您的反应应用程序中，
- 使用 styled-components 创建 HomeWrapper
- 使用 createGlobalStyle 函数覆盖一些浏览器默认样式
- 为侧边栏切换导入图像和 AsideToggle 组件
在 AsideToggle.js 中 在您的反应应用程序中
在此，我们使用 使用状态 用于更改切换的状态，提供切换一些样式，并使用 绝对位置 设置作为图像的切换栏的位置，并在每次状态更改时单击，
我们通过 AsideWrapper 中的道具切换来更改侧边栏菜单的位置
并且通过每次单击切换，left 的值在 0px 和 -280px 之间切换，并通过样式组件中的嵌套样式设置其他元素的样式除此之外，您还可以使用样式组件单独设置每个元素的样式
您还可以查看 GitHub 存储库， 源代码： - https://github.com/vashnavichauhan1825/sidebar-toggle ,
在 Twitter 上与我联系：- https://twitter.com/VashnaviChauhan
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
