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

动态面板实现内容切换

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

    一、交互效果:

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

    示例:

    二、准备:

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

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

    三、实现

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

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

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

    用例编辑面板

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

    相关文章

      网友评论

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

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