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”->& ...
随机推荐
- qsort 函数笔记
函数声明 void qsort(void *base, size_t nitems, size_t size, int (*compare)(const void *, const void*)); ...
- 异想家纯C语言矩阵运算库
Sandeepin最近做的项目中需要在嵌入式芯片里跑一些算法,而这些单片机性能不上不下,它能跑些简单的程序,但又还没到上Linux系统的地步.所以只好用C语言写一些在高级语言里一个函数就解决的算法了, ...
- DOM中的位置和大小(总结)
[window]window对象 一.position位置 screenLeft/screenTop (适用于火狐和谷歌) screenX/screenY (适用于IE) 二.size大小 inner ...
- 【置顶】入驻百家号【九哥聊IT】和【九哥九嫂小日子】,欢迎关注
欢迎大家关注. 1.关注百家号[九哥聊IT],每天专注讲解互联网最新资讯和知识分享.2.关注百家号[九哥九嫂小日子],带你看下班之外的九哥.
- learn more ,study less(二):整体性学习技术(下)
随意信息的处理 随意信息,或者内容太多.太复杂的信息,都不容易理解,它们需要不同的技术.假 如你发现联想法不能帮助你理解材料,或者需要花费的时间太长,这时候处理随意信息的方 法就很适合了. 这些处理随 ...
- Hyper-V虚拟机设置外部网络访问
在Hyper-V管理器中新建一个虚拟交换机,类型为 内部 ,修改名称为 nat 在虚拟机的设置页面中,将网络适配器设置为新建的虚拟交换机 nat 打开win10->控制面板->网络和共享中 ...
- Spring IoC 容器和 bean 对象
程序的耦合性: 耦合性(Coupling),又叫耦合度,是对模块间关联程度的度量.耦合的强弱取决于模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少.模块间的耦合度是指模块之间的依赖关系,包 ...
- 用java编写代码实现关机
public static void main(String[] args) { Runtime runtime = Runtime.getRuntime(); try { runtime.exec( ...
- LoadRunner参数传递给参数
需求:使用随机函数时,需要参数化某个参数,并且后面的步骤需要使用这个参数. 方法: lr_save_string 该函数主要是将程序中的常量或变量保存为lr中的参数 lr_eval_string 从参 ...
- C++ STL IO流 与 Unicode (UTF-16 UTF-8) 的协同工作
09年研究技术的大神真的好多,本文测试有很多错误,更正后发布下(可能与编辑器相关). file.imbue(locale(file.getloc(), new codecvt_utf8<wcha ...