使用响应式设计框架创建在移动设备上隐藏细节视图的主细节模式

Posted 2023-03-31

【中文标题】使用响应式设计框架创建在移动设备上隐藏细节视图的主细节模式

【英文标题】：Creating master detail pattern which hides detail view on mobile using responsive design frameworks

【发布时间】：2015-09-03 23:07:04

【问题描述】：

我正在寻找使用主从模式，其中主主视图包含一个项目列表，单击它会在详细视图中加载与该项目相关的所有信息。使用引导程序或基础都可以正常工作。我还可以隐藏手机的详细视图。

我想做的是在主视图中单击某个项目时，我想将视图更改为移动设备中的详细视图。我认为可以使用一些 jquery 来隐藏主视图并在移动设备上显示详细视图。我不确定这是否是正确的方法，我想知道人们是如何解决这个问题的。任何 angularjs/react 具体建议都会更好。

【参考方案1】：

我的方法是让您的主视图的className 由封闭组件中的状态确定。类似的东西；

<MasterView className=this.state.masterViewClass />

（显然已更改以适合您的代码，您可能希望将其应用于特定标签而不是整个反应元素）。

单击主视图的元素时，将其更改为 masterViewClass，利用引导程序 Responsive Utilities 隐藏您不想显示的元素。