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

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