Cytoscape.js-切换暗模式 [英] Cytoscape.js - Toggle Dark-Mode
本文介绍了Cytoscape.js-切换暗模式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我了解我可以在cytoscape.js中编辑节点和边缘的颜色
I understand that I can edit the color of nodes and edges in cytoscape.js
- 对于节点,我可以使用选择器:"node"
- 对于边缘,我可以使用选择器:'edge'
- 与此类似: Cytoscape.js-将核心背景设置为黑暗吗?
我应该使用什么选择器作为背景色?我想在浅色和深色背景之间切换(就像在亮/暗模式下切换一样).
What selector should I use for the background color? I want to toggle between a light and dark background (like a toggle for light/dark mode).
非常感谢任何可以回答的人.
Thank you very much for anyone who can answer.
推荐答案
您可以使用一些简单的js代码切换背景颜色.我在单击按钮时使用 .addEventListener()
实现了此功能:
You can toggle the background color with some simple js code. I implemented this functionality with .addEventListener()
on a button click:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': '#fff',
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'n5'
}
},
{
data: {
id: 'n6'
}
},
{
data: {
id: 'n7'
}
},
{
data: {
id: 'n8'
}
},
{
data: {
id: 'n9'
}
},
{
data: {
id: 'n10'
}
},
{
data: {
id: 'n11'
}
},
{
data: {
id: 'n12'
}
},
{
data: {
id: 'n13'
}
},
{
data: {
id: 'n14'
}
},
{
data: {
id: 'n15'
}
},
{
data: {
id: 'n16'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},
layout: {
name: 'dagre',
padding: 5
}
});
document.getElementById("toggleBackgroundColor").addEventListener("click", function() {
let cy = document.getElementById('cy')
cy.style.background = (cy.style.background == "black") ? "white" : "black"
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<b id="toggleBackgroundColor" style="cursor: pointer;color: green; z-index: 1">Toggle background-color</b>
<div id="cy"></div>
</body>
</html>
这篇关于Cytoscape.js-切换暗模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文