BootstrapBlazor.MindMap 8.0.6

Blazor MindMap 思维导图组件

基于mind-map的Blazor组件

示例:

https://blazor.app1.es/MindMaps

使用方法:

1.nuget包

BootstrapBlazor.MindMap

2._Imports.razor 文件 或者页面添加 添加组件库引用

@using BootstrapBlazor.Components

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.2

• 添加 Options 配置选项

v8.0.1

• 添加 SetTheme 动态切换主题方法
• 添加 SetLayout 动态切换结构方法

Blazor 组件

条码扫描 ZXingBlazor

图片浏览器 Viewer

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 MindMap

文件预览 FileViewer

视频播放器 VideoPlayer

图像裁剪 ImageCropper

视频播放器 BarcodeGenerator

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub