Angular实现双向折叠列表组件的示例代码-创新互联

最近在做一个双向折叠组件，如下图所示，页面是分为两组，左边页面是Summary Panel,主要是一组列表，右边页面是Detail Panel，展示左边列表中某一项的具体信息，我们把它记作“Middle State”。

我们还看到有“<”和“>”两组按钮，这就是我们要做的“双向折叠组件”。点击左边的“<”，Summary Panel折叠起来，Detail Panel铺满整个页面，我们把它记作“Left State”，如下图：

在Summary Panel折叠状态下，点击“>”，又回到“Middle State”。点击“>”,Detail Panel折叠起来，Summary Panel铺满整个页面，我们把它记作“Right State”，如下图：

我们通过以上的需求分析可知，

1.页面的总体布局是一个Summary的div，两个箭头buttons，一个Detail的div。

2.页面总共有三种state：“Middle”、“Left”、“Right”，有两个button：“<”和“>”，也就是两个button去控制三个state。

因此我们需要定义一个枚举来记录页面的三种状态（注意，定义枚举要用export导出，否则后面会出错）

export enum CollapseExpandState {
  Middle = 1,
  Left,
  Right
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。