美文网首页
动态面板实现内容切换

动态面板实现内容切换

作者: 小火龙1900 | 来源:发表于2018-05-24 17:39 被阅读7次

一、交互效果:

1)切换tab卡或者radio单选项,可以展示不同的内容。

示例:

二、准备:

(1)元件区:矩形框(tab选项)或者radio单选按钮

(2)展示内容:通过使用元件库的“动态面板”元件,实现对面板状态管理,达到与其他元件的一个关联和呼应。此处针对不同的面板增加对应的不同内容。(动态面板的属性是“面板状态管理”,面板状态的值是不同动态面板所需要展示的内容。)

三、实现

(1)选中你鼠标会触发(点击)的元件,如:面板区的tab项“语文”

(2)设置交互事件。当点“鼠标单击时”,会弹出“用例编辑面板”。选择元件属性“设置面板状态”,进行交互动作的配置。针对你想要的某动态面板,如名为“科目”的动态面板进行状态设置,选择状态“语文”。

即:当你鼠标选tab项为语文的时候,会触发科目动态面板的面板属性,展示状态属于“语文”面板的内容。于是,鼠标点击的tab选显卡与展示内容呈现了联动交互效果。

用例编辑面板

总是会有人问,干脆做一个最简单的示例小教程,希望能帮助到大家。

相关文章

  • Axure8.0实现移动端左右滑动切换效果(幻灯片)

    案例描述:实现手指左右拖动时,页面切换显示内容 实现步骤: 1、在页面添加一个动态面板,如下图 2、给动态面板添加...

  • 动态面板实现内容切换

    一、交互效果: 1)切换tab卡或者radio单选项,可以展示不同的内容。 示例: 二、准备: (1)元件区:矩形...

  • Axure-实现顶部tab式导航栏

    实现的效果:点击tab,切换对应的内容页面,指示标识移动到对应选中tab。 思路: ①通过动态面板实现内容页面切换...

  • 1.Axure动态面板之轮播图显示

    Axure中动态面板常用来实现交互效果,如: 使用动态面板制作轮播图。 使用动态面板制作tab页面切换。 使用动态...

  • 滑动切换

    滑动切换,利用切换动态面板的状态来实现,比较简单:

  • Axure一起来 1.5 动态面板

    本页内容参照官网Introducing Dynamic Panels 创建动态面板 在动态面板状态之间切换 一、创...

  • 淘宝页签切换效果

    淘宝页签的切换效果包括动态面板、热区的应用。 【效果图】 【思路分析】 利用动态面板状态的切换实现快速登录与账号密...

  • Axure RP8 | 动态面板-容器

    动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。其本身是一个透明的元件。一个动态面板里有若干个【...

  • Axure RP8 | 动态面板-循环

    动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。其本身是一个透明的元件。一个动态面板里有若干个【...

  • Axure RP8 | 动态面板-多状态

    动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。其本身是一个透明的元件。一个动态面板里有若干个【...

网友评论

      本文标题:动态面板实现内容切换

      本文链接:https://www.haomeiwen.com/subject/ufzjjftx.html