aipage网站选项卡容器使用

网站里选项卡使用很广泛,例如百度智能云官网就大量使用了选项卡切换交互,使用选项卡能更友好的展示信息,提供更好的用户体验。

aipage网站选项卡容器使用插图

1 选项卡使用

添加空白自由版块,拖拽元素 -> 容器 -> 横向选项卡到空白版块中,选项卡是高级容器,每一个选项卡内部的元素编辑与普通容器内编辑一致,通过箭头上下切换选项卡项,进入设置和样式给选项卡设计样式及标题等设置。

aipage网站选项卡容器使用插图1
aipage网站选项卡容器使用插图2

纵向选项卡的使用与横向选项卡类似,添加纵向选项卡然后设计选项内元素即可,纵向选项卡的差异是每一项的宽度是固定的。

2 自定义选项卡切换

除了选项卡自带的切换效果,可以借助视图控制搭配其他元素来实现更丰富的切换支持。首先去除标签的标题和图标以及顶部边框隐藏默认自带的选项卡头部

aipage网站选项卡容器使用插图3
aipage网站选项卡容器使用插图4

添加支持点击交互的元素,考虑到需要添加激活状态,推荐使用菜单元素里面的横向多行带图标菜单,给每个菜单项设置点击交互,选择视图控制并配置激活选项卡对应的帧数,配置好后预览点击菜单就能自动切换选项卡了。

aipage网站选项卡容器使用插图5
aipage网站选项卡容器使用插图6

除此之外也可以使用按钮、图片等支持点击交互的元素来控制选项卡,例如添加左右箭头图标就能实现与轮播元素类似的效果。

3 选项卡设计高级下拉导航

选项卡除了显示页面内容,也可以加到自由导航中设计网站高级下拉菜单,选项卡设计好每项内容后,添加到导航版块合适位置,然后开启默认不激活及超出隐藏即可。由于选项卡是通用容器,因此下拉菜单中可以任意定制下拉效果,而且每个下拉菜单设计不一样的效果,例如如下用户使用示例:

aipage网站选项卡容器使用插图7
aipage网站选项卡容器使用插图8
aipage网站选项卡容器使用插图9

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
在线客服
主机帮
我们将24小时内回复。
2024-10-30 22:31:06
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
176363189
当幸福来敲门
[小黄]
17307799197
[企业邮箱]
sudu@yunjiasu.cc
取消

选择聊天工具: