angularjs – 创建主细节模式,使用响应式设计框架隐藏移动设备上

发布时间：2020-12-17 18:04:30 所属栏目：安全来源：网络整理

导读：我正在寻找使用主 – 细节模式,其中主主视图包含项目列表并单击它在详细视图中加载与该项目相关的所有信息.使用bootstrap或foundation都可以正常工作.我还可以隐藏手机的详细视图. 我想要做的是点击主视图中的项目我想在移动设备中将视图更改为详细视图.我认

我正在寻找使用主 – 细节模式,其中主主视图包含项目列表并单击它在详细视图中加载与该项目相关的所有信息.使用bootstrap或foundation都可以正常工作.我还可以隐藏手机的详细视图.

我想要做的是点击主视图中的项目我想在移动设备中将视图更改为详细视图.我认为可以通过一些jquery隐藏主视图并在移动设备上显示详细视图.我不确定这是否是正确的方法,我想知道人们是如何解决这个问题的.任何angularjs / react特定建议都会更好.

我的方法是让主视图的className由封闭组件中的状态确定.就像是;

<MasterView className={this.state.masterViewClass} />

(显然已更改为适合您的代码,您可能希望将此应用于特定标记而不是整个反应元素).

单击主视图的元素时,相应地更改它的masterViewClass,利用bootstraps Responsive Utilities隐藏您不希望显示的元素.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!