跳至主要內容

日期时间框

2025年1月14日大约 2 分钟

日期时间框

用于选择或输入日期

属性

基础

  • 组件标题: 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+

  • 组件尺寸: 组件的宽度和高度,单位为px

    • 锁定纵横比::单击切换是否锁定纵横比,锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
  • 组件位置: 组件在大屏中的位置,包括组件的横坐标和纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

  • 隐藏时解析: 默认组件设置隐藏后组件不解析,组件配置的数据资源及交互事件,节点编程事件都不会执行。当开启隐藏时解析时,上述功能将执行。

    提示

    隐藏时解析常用于页面中不需要展示组件但要获取相关数据。

  • 尺寸: 设置组件尺寸,可选 超小

  • 范围选择: 设置是否开启时间范围选择。开启后,用户可以选择一个时间范围(如开始时间和结束时间)。

  • 当前时间日期: 设置是否显示当前时间日期。 4.3+

  • 选择器类型: 设置选择器的类型,可选 时间日期日期时间月份年份

  • 文本可输入: 设置用户是否可以手动输入时间。

  • 是否可清除: 设置用户是否可以清除已选择的时间。开启后,输入框右侧会显示清除图标,点击后可清除已选择的时间。

  • 占位文本: 设置输入框的占位文本。适用于在未选择时间时向用户提供提示信息。

  • 前占位文本: 设置范围选择框中第一个日期框的占位文本。仅在范围选择开启后可设置。

  • 后占位文本: 设置范围选择框中第二个日期框的占位文本。仅在范围选择开启后可设置。

  • 范围分隔符: 设置范围选择框中第一个日期框与第二个日期框之间的分隔符。

  • 输入框格式: 设置输入框中时间的显示格式,默认为yyyy-MM-dd

  • 数据格式: 设置选中时间的数据格式,默认为yyyy-MM-dd

盒样式

  • 高斯模糊: 模拟半透明磨砂玻璃的观感,结合透明度,使得背后的元素变得模糊,但轮廓和颜色仍依稀可见, 同时保持一定的视觉通透性。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时阴影比组件小。

编辑框

  • 背景颜色: 设置编辑框背景颜色。

  • 高度: 设置编辑框高度。

  • 字体颜色: 设置编辑框字体颜色。

  • 字体大小: 设置编辑框字体大小。

  • 字体粗细: 设置编辑框字体粗细,可选 普通加粗更细

  • 字体: 设置编辑框字体样式,可选系统内置字体和自定义字体。

  • 边框颜色: 设置编辑框的边框颜色。

  • 边框宽度: 设置编辑框的边框宽度。

  • 边框类型: 设置编辑框的边框类型,可选 实线虚线点状线

标签

  • 显示: 设置是否显示标签。

  • 内容: 设置标签内容。

  • 位置: 设置标签位置,可选

  • 宽度: 设置标签宽度。

  • 行高: 设置标签单行的高度。

  • 字体颜色: 设置标签字体颜色。

  • 字体大小: 设置标签字体大小。

  • 字体粗细: 设置标签字体粗细,可选 普通加粗更细

  • 字体: 设置标签字体样式,可选系统内置字体和自定义字体。

数据

静态数据

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

{
  "value1": "2019-12-25",
  "value2": ""
}
  • value1: 编辑框第一个时间。

  • value2: 编辑框第二个时间。

数据资源

  • 选择数据资源: 切换到 数据资源 标签,点击可从数据管理或API中选择相应的数据资源作为组件的数据支撑。

  • 还原默认数据: 点击刷新数据资源。

  • 搜索数据中的字段: 当列表中字段过多时,可通过搜索框搜索列表中的字段。

  • 刷新字段列表: 点击刷新字段列表

  • 字段类型

    • 字符型: 标识符为A

    • 数值型: 标识符为#

交互

日期时间切换事件

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

数据响应

日期时间框支持数据响应

节点编程

事件

  • 设置日期时间: 设置日期时间值。

    • 接收的参数:  日期时间。
上次编辑于: 2025/2/26 11:31:20
贡献者: xuch