javascript - 如何显示模式并仍然保留页眉?

标签 javascript reactjs

亲爱的 React 开发者,您好。 我真的很喜欢桌面上的雅虎网站(https://www.yahoo.com/)。当您单击帖子标题时,该帖子会显示在类似模式的页面中。页面标题仍然存在,您可以滚动内容,并且可以单击右上角的关闭按钮来关闭模式。地址栏和标题栏中的页面 URL 和标题发生变化。我认为从用户体验的 Angular 来看这是一个非常好的主意。用户可以返回博客文章列表,而无需在导航历史记录中来回切换。 我愿意为我的项目实现这种精确的设计。我正在使用 Material Design Bootstrap for React UI 包 ( https://mdbootstrap.com/docs/react/ ),但他们的模态组件 ( https://mdbootstrap.com/docs/react/modals/basic/ ) 不是那么顺利,无法得到相同的结果。有人能给我一些如何做的想法或建议我一些软件包吗?提前致谢。

最佳答案

我知道如何做到这一点的一种方法是使用此处记录的 Material-UI 抽屉:
https://material-ui.com/components/drawers/

结合持久抽屉剪裁抽屉可以给你带来这种效果。
这是这个想法的模型:
https://codesandbox.io/embed/material-demo-42stk?fontsize=14

关于javascript - 如何显示模式并仍然保留页眉?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58731383/

相关文章:

javascript - 如何使用上下文提供程序将状态移出组件

javascript - ReactJS - 排序 - TypeError : 0 is read only

javascript - <script> 标签中的 php 没有调用为什么执行?

javascript - 如何查找特定类别类型的检查行数?

javascript - RegEx 匹配字符串中的共享部分

reactjs - Reactjs 中的递归操作调用

javascript - 失败的 prop 类型 : Invalid prop `label` of type `object` supplied to `Button` , 预期 `string`

Javascript:检测字符串是否被 trim

javascript - 如何将选定的表 tr 移动到另一个表?

reactjs - 如何在 React 组件中使用 switch 语句?