为此,请将任务列表设为一个组件,并将每个任务设为一个组件。然后使用 CSS,在移动设备上隐藏任务列表组件。
在您的路由中执行以下操作:
{
path: 'task', component: TaskListComponent,
children: [
{
path: ':taskId',
component: TaskComponent
},
]
}
上面的代码会将任务组件作为任务列表组件的子组件加载。
HTML
我使用了 bootstrap 4 类。
<div class="container">
<div class="lists"> Code for your task list </div>
<div class="tasks">
<router-outlet></router-outlet>
</div>
</div>
CSS
这个CSS只是一个例子,你应该根据你想要的视图来编写。
.lists {
width: 50%;
float: left;
}
.tasks{
width: 50%;
float: right;
}
@media screen and (max-width: 600px) {
.lists {
display: none;
}
.tasks {
width: 100%;
float: none;
}
}
您无需返回移动设备即可查看任务列表。创建将显示任务列表的图标 onClick();
总结,把任务列表组件当成侧边栏,在移动端隐藏,可以切换。
我希望这有帮助。