编者按:本文是关于如何快速实现axurerp 9 Tab切换设计的小白教程。实现Tab切换的关键点是记得创建一个选项组。希望对大家有帮助。我们来看看。

一.思路

有几个选项Tab，就设计几个选项Tab。通过动态面板设计实现内容页面切换。设计Tab按钮的交互设计，绑定到对应的动态面板，实现动态按钮的状态切换。设计Tab选项组，设置选中效果，实现Tab的选中切换效果。

第二，步骤

1)在基本组件中找到“矩形”，并将矩形拖到页面面板。

2)多复制两个矩形，分别命名为“第1页”、“第2页”和“第3页”，并将其设置为自己喜欢的样式。

3)设置tab的交互风格。为了实现交互效果，可以设计不同风格的“鼠标悬停”、“鼠标按下”和“选择”。

鼠标悬停:

鼠标向下:

选定:

设计完成后，您可以选择顶部的“预览”功能来预览自己设计的效果。

4)在基本组件中找到“动态面板”，拖到页面面板，设计合适的尺寸，命名为“页面内容”。

5)双击动态面板，进入动态状态管理页面。

6)单击“状态1”，将其更改为“状态1”，并添加两个名为“状态2”和“状态3”的状态。

7)单击“状态1”，并在单击“第1页”选项卡时放置要显示的内容。“状态2”和“状态3”的操作逻辑是一样的。

状态1:

状态2:

状态3:

8)设计完动态面板的状态后，点击右上角的“关闭”，退出动态面板设计。

9)下一步是通过交互设计将每个选项卡与动态面板的对应状态关联起来。

第1页&状态1:

选择第1页，单击右侧的交互，然后单击新建交互。

点击选择:

在组件操作组中选择“设置面板状态”:

如下图所示，选择目标面板为“页面内容”，选择状态为“状态1”，然后点击右下角的“确定”按钮。

第2页&状态2:

第二页的操作是一样的。选择目标面板为“页面内容”，选择状态为“状态2”，然后点击右下角的“确定”按钮。

第3页&状态3:

第3页的操作是一样的。选择目标面板为“页面内容”，选择状态为“状态3”，然后点击右下角的“确定”按钮。

10)接下来，设计顶部选项卡的选择效果，即在选择了相应的页面后，顶部选项卡将始终呈现所选效果，直到选择了另一个选项卡。同时，我们将页面1设置为默认选择。

首先，选择三页的矩形，右键选择选项组。

然后将组名设置为“切换选项卡”，然后单击“确定”。

然后设置每页的制表符选择效果。如下图，点击“第1页”矩形，在“点击”的交互下点击“+”号继续插入。

在插入操作中，选择“设置选定”。

选择所选目标为“当前组件”，将“值”设置为“真”，然后单击右下角的“完成”。

第二页和第三页矩形的操作同上。

最后我们把Page 1设为默认页面，Page 1的矩形设为默认选中。单击“第1页”矩形，双击打开菜单栏，选择“选择”。

至此，tab开关实现。我们可以点击预览看看效果是否实现，然后美化导航按钮。