AxureRP分页签 / Tab选项卡切换功能~

Posted luwanying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AxureRP分页签 / Tab选项卡切换功能~相关的知识,希望对你有一定的参考价值。

最终结果图如下:

实现过程:

1、从元件库中拖一个动态面板,调整所需大小,接下来的步骤都通过双击动态面板来完成。

2、双击动态面板,弹出框“面板状态管理”,新建状态并命名。此处新建了TAB1、TAB2、TAB3...(需要几个tab根据自己需求)。

技术分享图片

3、再次双击动态面板(之后要再修改控制面板的内容都双击),弹出“面板状态管理”。双击TAB1,进入tab1编辑页面。

  在tab1界面,拖动一个大矩形,三个小矩形。调整位置将三个小矩形的底部和大矩形的顶部重合(这里可以放大来看,一定要重合)。

技术分享图片

4、选中tab1,点击矩形右上角的小圆点,选择底部无框的矩形,此时tab1的底边就不见了。

 

技术分享图片

 

技术分享图片

效果图:

技术分享图片

 再给tab2和tab3添加背景颜色:

技术分享图片

 

以上是关于AxureRP分页签 / Tab选项卡切换功能~的主要内容,如果未能解决你的问题,请参考以下文章

7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

Harmony OS — TabList和Tab分页栏

如何使LayUI的Tab选项卡标签在切换时,自动刷新

bootstrap的选项卡怎么禁止某个tab切换

vue 中使用 Ant Design 依次提供了三级选项卡

可以自动切换的tab选项卡实现过程详解