Angular实现双向折叠列表组件的示例代码

时间:2023-12-17 20:22:35
【文件属性】:

文件名称:Angular实现双向折叠列表组件的示例代码

文件大小:124KB

文件格式:PDF

更新时间:2023-12-17 20:22:35

angular ar margin-left

最近在做一个双向折叠组件,如下图所示,页面是分为两组,左边页面是Summary Panel,主要是一组列表,右边页面是Detail Panel,展示左边列表中某一项的具体信息,我们把它记作“Middle State”。 我们还看到有“<”和“>”两组按钮,这就是我们要做的“双向折叠组件”。点击左边的“<”,Summary Panel折叠起来,Detail Panel铺满整个页面,我们把它记作“Left State”,如下图: 在Summary Panel折叠状态下,点击“>”,又回到“Middle State”。点击“>”,Detail Panel折叠起来,Summary Panel铺满整


网友评论