simple-mind-map内置了很多主题,可以通过如下方式获取到所有的内置主题列表:
import { themeList } from 'simple-mind-map/src/constants/constant'
// import { themeList } from 'simple-mind-map/src/utils/constant' v0.6.0以下版本使用该路径
v0.6.8+,主题列表增加了代表是否是暗黑主题的字段dark,你可以根据这个字段来将界面切换为暗黑模式。
可以在实例化simple-mind-map时指定使用的主题:
new MindMap({
theme: 'minions'
})
如果想动态切换主题也很简单:
mindMap.setTheme('classic')
如果要获取当前使用的主题名称可以使用:
const theme = mindMap.getTheme()
除了可以使用内置的主题外,你也可以自定义新主题:
import MindMap from 'simple-mind-map'
// 注册新主题
MindMap.defineTheme('主题名称', {
// 主题配置
})
// 1.实例化时使用新注册的主题
const mindMap = new MindMap({
theme: '主题名称'
})
// 2.动态切换新主题
mindMap.setTheme('主题名称')
最好在实例化之前进行注册,这样在实例化时可以直接使用新注册的主题。
一个主题其实就是一个普通的对象,完整配置可以参考默认主题,defineTheme方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多,一个典型的自定义主题配置可以参考blueSky。
MindMap.defineTheme('redSpirit', {
// 背景颜色
backgroundColor: 'rgb(255, 238, 228)',
// 连线的颜色
lineColor: 'rgb(230, 138, 131)',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: 'rgb(222, 101, 85)',
// 根节点样式
root: {
fillColor: 'rgb(207, 44, 44)',
color: 'rgb(255, 233, 157)',
borderColor: '',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: 'rgb(255, 233, 157)',
borderWidth: 3,
}
},
// 二级节点样式
second: {
fillColor: 'rgb(255, 255, 255)',
color: 'rgb(211, 58, 21)',
borderColor: 'rgb(222, 101, 85)',
borderWidth: 2,
fontSize: 18,
active: {
borderColor: 'rgb(255, 233, 157)',
}
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(144, 71, 43)',
active: {
borderColor: 'rgb(255, 233, 157)'
}
},
// 概要节点样式
generalization: {
fontSize: 14,
fillColor: 'rgb(255, 247, 211)',
borderColor: 'rgb(255, 202, 162)',
borderWidth: 2,
color: 'rgb(187, 101, 69)',
active: {
borderColor: 'rgb(222, 101, 85)'
}
}
})