基于mind-map的Blazor组件
示例:
https://blazor.app1.es/MindMaps
使用方法:
1.nuget包
BootstrapBlazor.MindMap
2._Imports.razor 文件 或者页面添加 添加组件库引用
@using BootstrapBlazor.Components.MindMaps
3.razor页面
<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/MindMaps.razor"><h5>页面源码</h5></a>
<p>Tab:添加新节点</p>
<p>鼠标可拖动节点排列</p>
<MindMap @ref="MindMap" OnReceive="@OnReceive" OnError="@OnError" Options="Options" />
<Textarea @bind-Value="Message" />
<Button Text="下载为PNG" OnClick="Export" />
<Button Text="下载为json" OnClick="ExportJson" />
<Button Text="导出PNG" OnClick="ExportPng" />
<Button Text="导出对象" OnClick="GetFullData" />
<Button Text="导出json对象" OnClick="GetData" />
<Button Text="导入数据(json)" OnClick="SetData" />
<Button Text="复位" OnClick="Reset" />
@code{
[NotNull]
MindMap? MindMap;
string? Message { get; set; } = "";
MindMapOption Options { get; set; } = new();
private Task OnReceive(string? message)
{
Message = message;
return Task.CompletedTask;
}
private Task OnError(string message)
{
Message = message;
return Task.CompletedTask;
}
async Task Export()
{
await MindMap.Export();
await ShowBottomMessage("下载Png");
}
async Task ExportJson()
{
await MindMap.Export("json", WithConfig: false);
await ShowBottomMessage("下载Json");
}
async Task ExportPng()
{
await MindMap.Export(IsDownload:false, WithConfig: false);
await ShowBottomMessage("已导出Png");
}
async Task GetFullData()
{
await MindMap.GetData();
}
async Task GetData()
{
await MindMap.GetData(false);
}
async Task SetData()
{
if (Message != null) await MindMap.SetData(Message);
}
async Task Reset()
{
await MindMap.Reset();
}
async Task OnSelectedLayoutChanged(EnumMindMapLayout val)
{
await MindMap.SetLayout(val);
}
async Task OnSelectedThemeChanged(EnumMindMapTheme val)
{
await MindMap.SetTheme(val);
}
}
v8.0.7
- 破坏性更新: 命名空间改为 BootstrapBlazor.Components.MindMaps
v8.0.2
- 添加 Options 配置选项
v8.0.1
- 添加 SetTheme 动态切换主题方法
- 添加 SetLayout 动态切换结构方法
