ggEditor给节点增加提示框
参考官方文档:
https://www.yuque.com/antv/g6/plugin.tool.tooltip
在react-ggEditor使用方法:
import React from 'react';
import { Col } from 'antd';
import { Flow } from 'gg-editor';
import { withPropsAPI } from 'gg-editor';
import CustomNode from '../EditorCustomNode';
import CustomDocNode from '../EditorCustomNode/CustomDocNode';
import '@antv/g6/build/plugin.tool.tooltip';
import G6 from '@antv/g6' const FlowMap = (props) => {
const tooltip = new G6.Plugins['tool.tooltip']({
dx:10,
dy:10,
getTooltip({item}) {
if(item){
const model = item.getModel();
return `<div class="g6-tooltip">
<b>${model.fileName}</b>
</div>`
}
}
});
return (
<Col span={21} className='editorContent'>
<Flow
graph={{
plugins: [ tooltip ]
}}
className='flow'
data={props.data} />
<CustomNode />
<CustomDocNode />
</Col>
);
}; export default withPropsAPI(FlowMap);
更多的graph配置参考地址:
https://www.yuque.com/antv/g6/graph
提示信息 tool.tooltip
鼠标提示信息。
安装
在 HTML 中引用文件:
<script src="https://unpkg.com/@antv/g6/build/plugin.tool.tooltip.js"></script>
在 npm 中引用:
import '@antv/g6/build/plugin.tool.tooltip';
参数
参数 |
说明 |
类型 |
可选值 |
默认值 |
getTooltip |
自定义 tooltip 内容回调 |
function |
||
dx |
水平偏移 |
number |
正数 |
10 |
dy |
竖直偏移 |
number |
正数 |
10 |
使用
使用方式一:默认
实例化插件对象:
const tooltip = new G6.Plugins['tool.tooltip']();
在实例化 Graph
时作为插件插入:
const graph = new G6.Graph({
container: 'mountNode',
plugins: [ tooltip ]
});
graph.node({
tooltip(model) {
return [
['id', model.id]
]
}
});
使用方式二:自定义
实例化插件对象:
const tooltip = new G6.Plugins['tool.tooltip']({
getTooltip({item}) {
const model = item.getModel();
return '<div>this is ' + model.id + '</div>';
}
});
在实例化 Graph
时作为插件插入:
const graph = new G6.Graph({
container: 'mountNode',
plugins: [ tooltip ]
});
ggEditor给节点增加提示框的更多相关文章
- 2016-1-6第一个完整APP 私人通讯录的实现 2:增加提示用户的提示框,监听文本框
一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...
- ASP.NET 使用AJAX让GridView的数据行显示提示框(ToolTip)
介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- html+css创建提示框
看到下面的效果了吗? 本来我们站点是用下面的图片做的背景, 但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图: 但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Eclipse输入任意字母或指定字符出现提示框
Eclipse默认是输入"."的时候会有提示框提示对应的API. 如果想更方便的输入任意字母或者指定的符号出现提示框设置如下: 打开Eclipse,选中“Window”->& ...
随机推荐
- c#数字图像处理(四)线性点运算
灰度图像的点运算可分为线性点运算和非线性点运算两种.4.1线性点运算定义线性点运算就是输出灰度级与输入灰度级呈线性关系的点运算.在这种情况下,灰度变换函数的形式为: g(x, y)=pf(x,y)+L ...
- Git提交代码和更新代码命令
微信公众号:非科班的科班关注可了解更多的java教程和其它资源视频.问题或建议,请公众号留言; 1.Git提交代码 利用命令提交代码的步骤:1.1.拉取服务器代码,避免覆盖他人的代码 git pull ...
- ASP.Net Core 发布到IIS Http Error 502.5 官方解决办法
Http Error 502.5 - Process Failure 在IIS上发布.NET Core程序出现这个错误.网上搜索到的办法为什么总行不通呢? 有可能年代久远,现在的环境与当年不同,所以解 ...
- 面试系列-面试官:你能给我解释一下javascript中的this吗?
一.前言 关于javascript中的this对象,可能已经被大家说烂了. 即使是这样,我依然决定将这篇文章给水出来.毕竟全国在新型肺炎的影响下,公司没法正常复工. 除了刷刷手机,还是要适当的学习一下 ...
- HanLP《自然语言处理入门》笔记--1.新手上路
1. 新手上路 自然语言处理(Natural Language Processing,NLP)是一门融合了计算机科学.人工智能及语言学的交叉学科,它们的关系如下图所示.这门学科研究的是如何通过机器学习 ...
- Docker基础内容之镜像构建
前言 Docker可以通过读取Dockerfile中的指令来自动构建图像.Dockerfile是一个文本文档,包含用户可以在命令行上调用的所有命令来组装一个图像.使用docker构建用户可以创建一个自 ...
- 从App.config中读取数据库连接字符串
1.首先在App.config文件中添加如下代码注意<connectionStrings>插入位置. <connectionStrings> <add name=&quo ...
- Vue系列教程(一)基础介绍
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也可以进行手机App的开发,需要借助Weex) V ...
- 吐血推荐珍藏的IDEA插件
之前给大家推荐了一些我自己常用的VS Code插件,很多同学表示很受用,并私信我说要再推荐一些IDEA插件.作为一名职业Java程序员/业余js开发者,我平时还是用IDEA比较多,所以也确实珍藏了一些 ...
- ORACLE ITL事务槽
讲到ITL(事务槽)必定先说数据块,那么什么是数据块呢?先给大家上一个数据块结构图 数据块分别由块头.ITL(事务槽).表信息区.行信息区.块空闲区.行数据区组成,其中ITL用来记录在数据块发生的所有 ...