导航栏

2025年1月14日大约 5 分钟

导航栏

属性

基础

组件标题： 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+
组件尺寸： 组件的宽度和高度，单位为px。
- 锁定纵横比：：单击切换是否锁定纵横比，锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
组件位置： 组件在大屏中的位置，包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
隐藏时解析： 默认组件设置隐藏后组件不解析，组件配置的数据资源及交互事件，节点编程事件都不会执行。当开启隐藏时解析时，上述功能将执行。
提示
隐藏时解析常用于页面中不需要展示组件但要获取相关数据。

导航排布： 设置导航栏的排布方式，可选 横向、竖向。
分隔位置： 设置导航栏中分隔位置，可选 中心、自定义。适用于调整导航项之间的分隔效果。
分隔宽度： 设置导航栏中分隔宽度。适用于调整分隔的距离。
左右边距： 设置导航栏中每个导航项的左右边距。边距值越大，导航项之间的距离越大；值越小，导航项之间的距离越小。
内边距： 设置导航栏中每个导航项文字的内边距。内边距值越大，导航项内部的间距越大；值越小，导航项内部的间距越小。
水平对齐： 设置导航栏中导航项的水平对齐方式，可选 左、中、右。
垂直对齐： 设置导航栏中导航项的垂直对齐方式，可选 上、中、下。
圆角半径： 设置导航栏中导航项的圆角半径。
文字竖向： 设置导航栏中文字是否竖向显示。
背景色： 设置导航栏的背景颜色。
图片设置 设置导航栏的背景图片。优先级高于背景颜色。
- 图片选择： 可以选择素材库中的图片
- 图片地址： 可以是 http:// 或者 https:// 开头的外网的地址，也可以是项目本地的图片路径，例如./static/template/TJ1/material/bg.png

文本样式： 导航中文字的文本格式。
- 字体颜色： 设置文字字体颜色。
- 字体大小： 设置文字字体大小。
- 字体粗细： 设置文字字体粗细，可选 普通、加粗、更细。
- 字体： 设置文字字体样式，可选系统内置字体和自定义字体。

盒样式

高斯模糊： 模拟半透明磨砂玻璃的观感，结合透明度，使得背后的元素变得模糊，但轮廓和颜色仍依稀可见，同时保持一定的视觉通透性。2024.3+
透明度： 设置组件的透明度，取值范围为0~1。当为0时，组件隐藏；当为1时，组件显示。默认透明度为 1。
2D 旋转： 设置组件的旋转角度度数。默认旋转度数为 0，其最大旋转度数为 360 度，从左向右拉取滑块为顺时针旋转。
3D 旋转： 点击在下拉框中选择3D旋转。4.2+
- X 轴：基于横轴旋转，值为角度度数；
- Y 轴：基于纵轴旋转，值为角度度数；
- Z 轴：基于垂直于屏幕的轴旋转，值为角度度数（特别的，若只设置 Z 轴的值，则效果等同于 2D 旋转）。
- 透视距离：观察者与屏幕之间的距离。值越大，距离屏幕越近；值越小，距离屏幕越远。默认为 500。
- 透视位置：观察者与目标物之前的位置。分别代表 X 轴和 Y 轴，值为百分比值，取值范围为 0 ~ 100。默认 50|50，即正对目标物。
边框： 设置组件边框样式。
- 单击设置单边样式。
- 按 Ctrl 键，连续单击手柄，可同时设置多边样式。
- 单击选中状态同时设置四边样式。
- 可设置单个边框得显隐、颜色、宽度和类型。
圆角： 设置边框圆角，可分别设置四个方向的圆角大小。
背景：3.0+
- 单击设置纯色背景。
- 单击添加多个颜色设置渐变色背景。
- 背景渐变色：线性渐变、径向渐变。
  - 线性渐变：可通过调整角度改变背景渐变的方向。
  - （1） 控制颜色交界线的渐变角度。
  - （2） 选择起始颜色并控制占比。
  - （3） 选择过渡颜色并控制占比。
  - 径向渐变：从组件中心向周围渐变，可选择“椭圆形”和“圆形”作为组件背景中心的形状。
  - （1） 控制渐变中心的形状。
  - （2） 选择起始颜色并控制占比。
  - （3） 选择过渡颜色并控制占比。
- 背景图片：素材库图片、图片地址。
区域阴影：
- 单击设置阴影颜色。
- 单击切换阴影显示内部或外部。
- 水平： 阴影的水平偏移量。值为0时阴影在组件下方，值>0时阴影向右侧偏移，值<0时阴影向左侧偏移。
- 垂直： 阴影的垂直偏移量。值为0时阴影在组件下方，值>0时阴影向下方偏移，值<0时阴影向下方偏移。
- 模糊： 阴影的模糊程度。值为0时阴影没有模糊效果，值越大阴影效果越明显。
- 尺寸： 阴影的尺寸。值为0时阴影与组件大小相同，值>0时阴影比组件大，值<0时阴影比组件小。

显示： 设置当前导航是否显示。
序号： 设置当前导航的序号。
显示名称： 设置当前导航显示名称，可输入 HTML 标签。
背景样式：
- 背景色： 设置当前导航的背景颜色。
- 图片设置 设置当前导航的背景图片。优先级高于背景颜色。
  - 图片选择： 可以选择素材库中的图片
  - 图片地址： 可以是 http:// 或者 https:// 开头的外网的地址，也可以是项目本地的图片路径，例如./static/template/TJ1/material/bg.png

文本样式： 当前导航中文字的文本格式。
- 字体颜色： 设置文字字体颜色。
- 字体大小： 设置文字字体大小。
- 字体粗细： 设置文字字体粗细，可选 普通、加粗、更细。
- 字体： 设置文字字体样式，可选系统内置字体和自定义字体。

超链接配置： 组件可跳转的超链接配置。
- 链接类型： 设置超链接类型，可选 大屏、外链。
- 链接大屏/地址： 当 链接类型 选择大屏时可选择当前空间已发布的大屏，选择外链时输入需要打开的外链，支持{var_变量名}动态变量；超链接的格式为浏览器所支持的所有格式。4.2+
- 打开方式： 设置打开超链接的方式，可选 新窗口、当前窗口。
- 加载动效： 设置跳转时是否启用加载动效。

选中导航

选中背景色： 设置选中导航的背景颜色。
图片设置： 设置选中导航的背景图片。
- 图片选择： 可以选择素材库中的图片
- 图片地址： 可以是 http:// 或者 https:// 开头的外网的地址，也可以是项目本地的图片路径，例如./static/template/TJ1/material/bg.png
文本样式： 设置选中导航的文本样式。
- 字体颜色： 设置选中导航的文字字体颜色。
- 字体大小： 设置选中导航的文字字体大小。
- 字体粗细： 设置选中导航的文字字体粗细，可选 普通、加粗、更细。
- 字体： 设置选中导航的文字字体样式，可选系统内置字体和自定义字体。

数据

静态数据

上图中的示例JSON代码如下：

[
  {
    "text": "按钮一"
  },
  {
    "text": "按钮二"
  },
  {
    "text": "按钮三"
  }
]

text： 按钮的名称。

数据资源

选择数据资源： 切换到 数据资源 标签，点击可从数据管理或API中选择相应的数据资源作为组件的数据支撑。
还原默认数据： 点击①处刷新数据资源。
搜索数据中的字段： 当列表中字段过多时，可通过搜索框搜索列表中的字段。
刷新字段列表： 点击②处刷新字段列表
字段类型
- 字符型： 标识符为A。
- 数值型： 标识符为#。

交互

切换按钮组事件

勾选启用，开启切换按钮组事件。当按钮组中的按钮时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。

悬停事件 3.0+

勾选启用，开启悬停事件。当鼠标悬停按钮组件时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。

移出事件 3.0+

勾选启用，开启移出事件。当鼠标移出按钮组件时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。

数据响应

按钮组支持数据响应。

节点编程

事件

切换按钮组事件： 切换按钮组触发事件。
- 抛出的参数： 按钮组所携带的数据。
悬停事件： 鼠标悬停时触发事件。 3.0+
- 抛出的参数： 按钮组所携带的数据。
移出事件： 鼠标移出时触发事件。 3.0+
- 抛出的参数： 按钮组所携带的数据。

动作

设置选中按钮： 设置按钮组选中的按钮。 4.3+
- 接受参数： 设置按钮组选中按钮的, 参数为按钮的索引, 0为不选中。