如何动态控制组件样式
本文档以Tab列表动态控制通用标题组件样式更新为例,为您介绍蓝图编辑器动态控制组件样式的方法。
前提条件
准备好您的交互需求。 本案例的交互需求为:使用Tab列表动态控制通用标题文本的颜色。
背景信息
本案例的场景为:通用标题在项目中经常使用动态数据源,用户需求为根据数据源返回值的不同,使用不同的颜色展示该文本。 本案例实现的功能:使用Tab列表组件模拟实际场景的动态数据源(如API、数据库等),根据通用标题接收到的value值不同,切换展示不同的数据样式。
理解案例交互
当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
- 组件:组件包含两种能力,事件抛出能力和动作执行能力。本案例使用了通用标题组件之间的联动。
- Tab列表:具备抛出请求接口返回数据的能力。
- 通用标题:属于被联动组件,具有接收数据并执行动作的能力。
- 蓝图编辑器:通过运用逻辑节点编排的方式,将上游组件的交互/事件与下游组件的执行动作绑定,从而实现页面内组件间的交互联动。
信息
说明 蓝图编辑器配置完成后需要在预览页查看配置效果。
配置案例交互
- 参考画布编辑器 添加组件,在画布编辑器页面搭建所需要的Tab列表和通用标题组件。
- 修改通用标题的配置面板中的标题配置项。
- 勾选通用标题数据面板中的受控模式。
- 样式配置完成后,单击画布编辑器图层栏内通用标题和Tab列表组件,右键选择导出到蓝图编辑器。
- 在画布编辑器页面左上角,单击蓝图编辑器图标,切换到蓝图编辑器配置页面。**
- 在蓝图编辑器配置页面,将左侧导入节点栏内的Tab列表和通用标题节点拖至画布中,并按照如下图所示的样式进行连线。
您需要进行两次连线,如上图所示。
- 将Tab列表的当Tab点击时事件与通用标题的导入数据接口动作连线。
- 将通用标题的当数据接口请求完成时