Axure 如何设计级联选择类组件
Axure的级联选择组件本家儿要操纵动态面板，结果图片如下，用户可以经由过程一级级选择确定子项的方针，以下以城市为例介绍具体实现方式。
东西/原料
- Axure 9
方式/步调
- 1
起首介绍若何操纵动态面板实现级联的选择，第一步我们设计好框架
1、拖动一个矩形框作为布景，设置暗影使其看上去比力美不雅
2、再拖动三个矩形框作为每一个项承载
3、拖动小矩形作为数据内容，各个小矩形的悬停结果设置为浅蓝色，选中时也为浅蓝色
- 2
框架搭完，第二步我们设置数据
1、将作为省的数据及矩形框组合定名为省；作为市的数据矩形框及矩形框02组归并转换为动态面板定名市；作为区的数据矩形框及矩形框03组归并转换为动态面板区
2、如图设置市的面板状况并填凑数据
3、如图设置区的面板状况并填凑数据
- 3
设置数据完第三步设计交互结果，以浙江省的为例
1、将两个动态面板设置为埋没
2、当点击浙江省时，滑动呈现市的动态面板，面板状况为浙江省下市
3、当点击杭州市时，滑动呈现区的动态面板，面板状况为杭州市下区
如下图
- 4
其他数据的交互结果也是如斯，这里不再赘述，上述步调做完级联选择就根基实现。接下来我们要设计一个选择框，使选择到对应区时，选择框可以或许获取到数据。
1、起首还需要将我们方才设计好的级联选择的组合定名为级联选择下拉框然后设为埋没
2、我们拉动一个矩形框，设置悬停和选中结果，我这里依旧为#108EE9的浅蓝色。
交互事务如下图
- 5
最后我们在单击区的数据时，选择框的文本变为该区的数据即可，如下图
- 6
前面步调做完根基结果就完当作啦
- 发表于 2019-12-10 20:01
- 阅读 ( 1269 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章