DDei在线设计器-属性编辑器

DDei-Core-属性编辑器

  DDei-Core-属性编辑器插件包含了文本大文本数值下拉单选勾选以及颜色等属性编辑。

  图形属性共同构成一个完整的定义,属性编辑器就是编辑属性值的控件。当选中图形实例时,属性面板就会展现当前实例的所有属性以及属性编辑器

  如需了解详细的API教程以及参数说明,请参考DDei文档

在这里插入图片描述

文本

  文本类型的属性编辑器,显示为一个文本框。

在这里插入图片描述

基本信息

编辑器名称text
类名DDeiCoreTextPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreTextPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreTextPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'code',   //编码标识,唯一'name': '编码',    //名称'desc': '控件在业务上的唯一编码,缺省和控件ID一致', //说明'controlType': 'text', //属性编辑器,引用编辑器名称 // [!code focus:1]'dataType': 'string',  //数据类型'defaultValue': '编码001', //缺省值
}

大文本

  文本类型的属性编辑器,显示为一个大文本框。

在这里插入图片描述

基本信息

编辑器名称textarea
类名DDeiCoreTextAreaPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreTextAreaPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreTextAreaPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'text','name': '文本','desc': '控件的主体显示文本','controlType': 'textarea',  // [!code focus:1]'defaultValue': '','dataType': 'string','type': [1, 2], //类别,1图形,2业务,3事件'readonly': true,
},

数值

  文本类型的属性编辑器,由区域选择框以及一个文本框构成。

在这里插入图片描述

基本信息

编辑器名称range
类名DDeiCoreRangePropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreRangePropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreRangePropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'fmt.nscale','name': '小数位数','desc': '格式化小数位数','controlType': 'range', // [!code focus:1]'min': 0,'max': 5,'dataType': 'integer','defaultValue': 0,'type': [1, 2]
},

下拉

  用于在一组值中选择单个值,显示为一个下拉框。

在这里插入图片描述

基本信息

编辑器名称combox
类名DDeiCoreComboxPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreComboxPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreComboxPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'fmt.mmark','name': '货币符号','desc': '显示货币符号','controlType': 'combox', // [!code focus:1]'dataSource': [{ 'text': '无', 'value': '' }, { 'text': '人民币', 'value': '¥' }, { 'text': '美元', 'value': '$' }, { 'text': '欧元', 'value': '€' }, { 'text': '英镑', 'value': '£' }, { 'text': '日元', 'value': '¥' }, { 'text': '卢布', 'value': '₽' }, { 'text': '法郎', 'value': '€' }],'defaultValue': '','dataType': 'string','type': [1, 2],'itemStyle': { width: 80, height: 25, col: 2, row: 0, imgWidth: 20, imgHeight: 20 },
}

单选

  用于在一组值中选择单个值,显示为一组单选框。

在这里插入图片描述

基本信息

编辑器名称radio
类名DDeiCoreRadioPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreRadioPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreRadioPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'border.type','name': '边框类型','desc': '用来快速选择边框的类型,以便于套用相关的样式','controlType': 'radio', // [!code focus:1]'dataType': 'string','dataSource': [{ 'text': '无线条', 'value': 0 }, { 'text': '实线', 'value': 1 }],'defaultValue': 1,'hiddenTitle': true,'display': 'column','cascadeDisplay': { 1: { show: ["border.color", "borderOpacity", "borderWidth", "borderDash", "borderRound"], hidden: [] }, default: { show: ["border.color", "borderOpacity", "borderWidth", "borderDash", "borderRound"], hidden: [] }, empty: { hidden: ["border.color", "borderOpacity", "borderWidth", "borderDash", "borderRound"] } },
}

勾选框

  用于是/否这种二选一式的选择,显示为一个带勾的复选框。

在这里插入图片描述

基本信息

编辑器名称switch-checkbox
类名DDeiCoreSwitchCheckboxPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreSwitchCheckboxPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreSwitchCheckboxPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'textStyle.lockWidth','name': '锁定宽度','desc': '超范围自动扩展的情况下锁定宽度','controlType': 'switch-checkbox', // [!code focus:1]'dataType': 'integer','defaultValue': 0,'hiddenTitle': true,'display': 'column','type': [1, 2]
}

颜色选择

  用于颜色选择,显示为一个下拉框,点击弹出颜色选择弹框。

在这里插入图片描述

基本信息

编辑器名称color-combo
类名DDeiCoreComboxPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreComboxPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreComboxPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'textStyle.bgcolor','name': '文字背景','desc': '文本的背景颜色','controlType': 'color-combo',  // [!code focus:1]'dataType': 'string','defaultValue': '',
}

仓库信息

源码: https://gitee.com/hoslay/ddei-editor

文档: http://docs.ddei.top

在线体验: https://www.ddei.top

技术支持

QQ:3697355039     邮箱:3697355039@qq.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/349062.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

qt仿制qq登录界面

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {// 设置窗口大小this->resize(window_width, window_heigth);// 固定窗口大小this->setFixedSize(window_width, window_heigth);// 设置窗口图标this->se…

怎么学习汇川Codesys PLC教程?

前言 各位好,我在B站和抖音上都有发布视频的,搜索我的名称“阿凡工控分享”即可。在CSDN上发表文章也是想把我的一点见解和经验分享出来,进一步的方便大家进行学习。 我是正文 本文主要也是为了方便大家学习汇川的Codesys PLC而制作的&…

登录/注册- 滑动拼图验证码(IOS/Swift)

本章介绍如何使用ios开发出滑动拼图验证码,分别OC代码和swift代码调用 1.导入项目model文件OC代码(下载完整Demo) 2.放入你需要显示的图片 一:OC调用 #import "ViewController.h" #import "CodeView.h"…

讯飞有一个可以根据描述文本自动生成PPT的AI接口,有趣

文档:https://www.xfyun.cn/doc/spark/PPTGeneration.html 价格方面提供了免费1000点的额度,生成一次是10点,正好100次,如果要购买的话最低要购买1344元的,没有按量付费的模式,个人小开发者可买不起。 让我…

【简单介绍下Sass,什么是Sass?】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

波拉西亚战记加速器 台服波拉西亚战记免费加速器

波拉西亚战记是一款新上线的MMORPG游戏,游戏内我们有多个角色职业可以选择,可以体验不同的战斗流派玩法,开放式的地图设计,玩家可以自由的进行探索冒险,寻找各种物资。各种随机事件可以触发,让玩家的冒险过…

LabVIEW缝缺陷图像标注库

LabVIEW缝缺陷图像标注库 开发了一个基于LabVIEW平台构建的船舶焊缝缺陷图像标注库。该库旨在通过高效和简洁的方式处理和标注船舶焊缝缺陷图像,提高缺陷识别的准确性和效率,进而保障船舶的结构安全。 项目背景 在船舶制造过程中,焊接质量…

MFC实现子控件focus焦点上下移动父控件ListView和Gridview也跟着向上下移动

项目中要实现mfc功能,然后子控件焦点下移,LIstView和Gridview父控件不会下移,所以就有这个文章。废话不多说直接上代码。 MFCGridView.java import android.content.Context; import android.util.AttributeSet; import android.view.View;…

精益生产VS六西格玛:一场管理领域的精彩较量

精益生产与六西格玛,犹如管理学的双璧,各具魅力又相得益彰。精益生产,如同一位巧夺天工的工匠,专注于消除生产中的浪费,以极简为美。它旨在通过减少库存、缩短生产周期、提升产品质量等手段,使生产过程更加…

Centos离线安装Python3

目录 1.准备工作 2.解压python压缩包 3.编译 4.安装、更改环境变量 5.建立pip连接 使用的是Centos7服务器,Py版本是py3.9.0 1.准备工作 首先确保服务器中存在相关的编译器,例如GCC;这里不做过多叙述,需要者前往&#xff1a…

(几何:六边形面积)编写程序,提示用户输入六边形的边长,然后显示它的面积。

(几何:六边形面积)编写程序,提示用户输入六边形的边长,然后显示它的面积。计 算六边形面积的公式是: 这里的s就是边长。下面是一个运行示例 package myjava; import java.math.*; import java.util.Scanner; public class cy {public static void main(S…

python的a[:2]、a[:] 和a [::] 的区别

一、a[:2] 数据准备 import numpy as np X np.array([[0,1],[2,3],[4,5],[6,7],[8,9],[10,11],[12,13],[14,15],[16,17],[18,19]]) print(X)形成矩阵 print (“X[: 2]:”, X[: 2]) ### :表示索引 0至1行; 二、a[:]和a [::] 在 Python 中,[:] 和 [::…

【QT5】<总览五> QT多线程、TCP/UDP

文章目录 前言 一、QThread多线程 二、QT中的TCP编程 1. TCP简介 2. 服务端程序编写 3. 客户端程序编写 4. 服务端与客户端测试 三、QT中的UDP编程 1. UDP简介 2. UDP单播与广播程序 前言 承接【QT5】<总览四> QT常见绘图、图表及动画。若存在…

高速直线导轨驱动与控制,精准稳定的运动核心元件

直线导轨在工业生产中,精度和稳定性是至关重要的。而在各种机械设备中,高精度直线导轨是提高设备运动控制精度和平稳性的核心部件,当我们考虑高速运动时,直线导轨的精度和稳定性是非常重要的因素。 直线导轨系统中如何确保高速运动…

电脑自带录屏在哪?电脑录屏,4个详细方法

在现代社会中,越来越多的人需要在电脑上录制视频,比如录制游戏操作、制作教学视频、演示文稿等等。因此,电脑录屏成为了一项非常重要的功能。那么电脑自带录屏在哪?本文将带领大家看看可以使用哪些方法进行录屏。 录屏方法一&…

linux中: IDEA 由于JVM 设置内存过小,导致打开项目闪退问题

1. 找到idea安装目录 由于无法打开idea,只能找到idea安装目录 在linux(debian/ubuntu)中idea的插件默认安装位置和配置文件在哪里? 默认路径: /home/当前用户名/.config/JetBrains/IntelliJIdea2020.具体版本号/options2. 找到jvm配置文件 IDEA安装…

【Gitlab】Gitlab MAC M1通过Docker Desktop安装教程

目录 一、拉取镜像 二、配置容器 2.1 配置Volumes 2.2 配置Gitlab 2.3 配置完成,重启GitLab容器 2.4 查看GitLab的root密码 三、brew安装gitlab 3.1 安装命令 3.2 启动命令 参考资料 一、拉取镜像 docker pull yrzr/gitlab-ce-arm64v8 二、配置容器 2.1 …

设计模式——建造者模式(生成器模式)

建造者模式(生成器模式) 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示的意图 用了建造者模式,那么用户就只需要指定需要构建的类型就可以得到它们,而具体构造的细节和过程不需要知道 概括地说,Bu…

山东大学软件学院项目实训-创新实训-基于大模型的旅游平台(三十二)- 微服务(12)

目录 12.8 RestClient查询文档 12.8.1 快速入门 12.8.2 match, term,bool,range查询 12.8.3 排序和分页 12.8.4 高亮 12.8 RestClient查询文档 12.8.1 快速入门 Testvoid testMatchALL() throws IOException {// 1. 准备requestSearchReq…

Tita 360评估:有效 360度反馈流程的 10 大步骤

宣传过程 如果你的公司首次引入多方位反馈或 360 度反馈,那么向所有利益相关者描述这一流程至关重要。由于流程太新,很多人还不了解。确保参与该流程的每个人都了解其目的,以及将如何实施该流程和使用其结果。花时间在一对一会议、小组会议和…