定制展示：多状态切换示例

定制模块，属于高阶的动态效果，也几乎是所有的模块中最复杂的模块，用户可以选择不同的组合，查看产品不同选项下的效果。

接下来我们以上方的【颈枕】产品为例，为大家介绍如何用 雨燕装修大师 来做一个定制模块。

图片物料准备

如上图所示，我们总共有三种选项，分类、面料、颜色，每个选项有4中选择，那图中可能出现的产品状态，总数量也就是 4x4x4，也就是64种状态，每种状态，我们需要准备一张图，所以总共要准备64张图。

我们需要展示的状态越多，需要准备的图片物料也就越多，如果有4种选项，每种选项有5种选择，那总的图片数量就会变成 5x5x5x5 ，也就是 625种状态!!!，这出图的工作量就不可想象了，即使装修成最后页面也会非常卡顿。

因此注意这里尽量减少选项的展示，推荐的数量是 最多三类选项，每种选项不超过 4种选择 ，这样可以平衡物料准备难度和实际的效果。

然后物料中的每一张图，其实都是一种状态，举例：

颈枕分类下的 第一种面料的第一种颜色，如下图所示，左侧展示对应的产品，右侧选中对应的区域。

颈枕分类下的 第一种面料的第二种颜色，如下图所示，图中 颜色的部分，就选中了第二个图

楼层装修

准备完图片物料之后，接下来我们来进行楼层装修。

要实现这种定制效果，我们需要用到【多状态切换楼层】，在开始装修之前，我们需要简单的介绍一下实现原理:

分类有4中选择(Neck Pillow/Lumbar Support/Pillow/Seat Cushion)，每个分类其实都算一种状态。

然后每个分类下，又有不同的面料(Cooling Fabric/Silky Smooth/Buttery Soft/Breathable)，面料也就算是分类下的子状态，因此每个分类状态的类型，需要选成 【多状态切换】。

面料下面还有不同的颜色，因此面料的类型，也需要选成 【多状态切换】。

而选到颜色的时候，直接展示上面选择的分类下的面料下的颜色即可，因此颜色，我们用图片容器组件来展示对应的图片就可以。

1. 上传图片素材 首先第一步，我们需要把准备好的图片物料，上传到阿里后台的 图片银行  https://photobank.alibaba.com/ ，将来我们会从图片银行中直接选择图片。

2.  点击左侧的 新增楼层，选择 【多状态切换】楼层。

3. 接下来我们编辑整个楼层的默认状态，也就是刚看到楼层时候的样子，点击右侧的的默认状态的编辑按钮，然后在弹窗中的内容类型，选择 【图片容器】，然后在下面选择图片即可。

选完之后，楼层就会有一个初始状态，也就是下面的样子：

4. 接下来我们给4个分类，添加4种状态，点击右侧的添加状态，添加4个状态，然后把4个指示器拖动到4个分类的小图标上，代表的意思就是，当鼠标 点击/滑过 指示器的时候，展示对应的状态下的内容。

5.  点击修改每种状态的默认状态，以第一个状态为例，点击状态1右侧的编辑按钮，在弹框中，类型选择 【多状态切换】，然后点击 默认状态 右侧的编辑，编辑框中，把类型选择成【图片容器】，然后下面的图片选择第一个分类选中时候的图片即可。

接下来，用同样的方法，把分类的其他三个状态的默认状态，也设置一下。设置完之后，我们在预览区域，点击分类的指示器，就可以看到左侧的内容，会跟着我们的点击，发生变化。