Axure如何设计日期选择框 _9

前篇经验分享了axure有关设计时候选择框的方式，与时候分歧的是日期选择框涉及的是选择日期。这里再为大师介绍关于日期选择框的设计方式。

需要这些哦
Axure 9
方式/
1起首我们在Axure中拖动一个矩形作为日期选择呈现，定名为日期选择框，并按需设计结果，这里我设计悬停及选中为浅蓝色

文章插图

2接着拖动一个矩形框作为承载日期的底部面板，在样式中设计暗影结果

文章插图

3接着建造相关日期，相关箭头可以在阿里巴巴矢量图标库找到。
1、拖动两个矩形作为年和日期摆放，用两种箭头作为年和月的调整，即点击双箭头跳上一年下一年的结果，单箭头跳换上个月下个月的结果。同时为箭头设置悬停结果

文章插图

4接下来设计日期，不属于本月的时候字体较属于本月的更灰些，同时鼠标移至对应日期时字体变为蓝色结果

文章插图

5之后将有关日期的组归并转换为动态面板，并设置为埋没

文章插图

文章插图

6在日期选择框中设计事务交互，当点击时切换显示动态面板并标的目的下滑动、埋没动态面板并标的目的上滑动。如图

文章插图

7接下来设计选中相关日期时，日期选择框文本变为选中日期的时候，以1号为例，新建单击交互事务，
1、当点击时日期选择框为当前年代（即一起头用来暗示2019年12月的矩形）文本值加上选中的日期。
2、动态面板标的目的上滑动埋没
3、设计完事务后点击预览没问题之后将1号上的事务复制黏贴到其他可选择的日期上
4、之后点击预览，可以看见根基的日期选中结果完当作

文章插图

文章插图

8接下来我们要设计关于年和月的切换。关于这部门的思绪大致如下：
因为每一年每个月所对应的日期都是纷歧样的，所以需要操纵动态面板成立多个状况，当点击时设置动态面板切换到对应的状况即可。有乐趣的伴侣可以思虑一下若何设计。

9因为Axure演示原型时不需要这么精确，所以我们可以点击相关箭头时使文本酿成对应文本就行，可是问题在于我们没法子知道当前点击时需要酿成什么文本，点击了几多次。所以要操纵全局变量来实现这个结果。