Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/StefH/jsMind.Blazor
A Blazor JSInterop wrapper for jsMind
https://github.com/StefH/jsMind.Blazor
blazor interop javascript jsmind mindmap
Last synced: 3 months ago
JSON representation
A Blazor JSInterop wrapper for jsMind
- Host: GitHub
- URL: https://github.com/StefH/jsMind.Blazor
- Owner: StefH
- License: mit
- Created: 2020-05-05T09:08:24.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-29T10:02:37.000Z (7 months ago)
- Last Synced: 2024-04-14T13:08:17.445Z (7 months ago)
- Topics: blazor, interop, javascript, jsmind, mindmap
- Language: JavaScript
- Size: 21.8 MB
- Stars: 18
- Watchers: 3
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - jsMind.Blazor -  A Blazor JSInterop wrapper for jsMind, a MindMapping tool. (Libraries & Extensions / Tools & Utilities)
README
# jsMind.Blazor
A Blazor JSInterop wrapper for [jsMind](https://github.com/hizzgdev/jsmind).
[](https://www.nuget.org/packages/jsMind.Blazor)
### Live Demo
https://stefh.github.io/jsMind.Blazor
### Supported Functionality
See [Wiki : Supported-Functionality](https://github.com/StefH/jsMind.Blazor/wiki/Supported-Functionality)
### Usage
#### Install the NuGet
```
PM> Install-Package jsMind.Blazor
```
#### Add the required javascripts and stylesheet to _Host.cshtml (Server) or index.html (WebAssembly)
``` diff
. . .
+
+
+
```
#### Add the required imports to the _Imports.razor
``` diff
. . .
@using Microsoft.JSInterop
+ @using JsMind.Blazor.Components
+ @using JsMind.Blazor.Models
+ @using JsMind.Blazor.Events
+ @using JsMind.Blazor.Constants
```
#### Use the MindMapContainer
`razor-html`
``` html
@page "/"
```
`razor - @code`
``` c#
{
private MindMapTreeContainer _myTreeNodeContainer;
// Define the MindMapOptions
readonly MindMapOptions _options = new MindMapOptions
{
Editable = false,
Theme = MindMapThemes.Primary
};
// Define some MindMapTreeData
readonly MindMapTreeData _treeData = new MindMapTreeData
{
RootNode = new MindMapTreeNode
{
Id = "root",
Topic = "-Root-",
Children = new List
{
new MindMapTreeNode
{
Id = "sub1.0",
Topic = "sub1.0-right"
},
new MindMapTreeNode
{
Id = "sub1.1",
Topic = "sub1.1-right",
Children = new List
{
new MindMapTreeNode
{
Id = "sub1.1a",
Topic = "sub1.1a-right"
}
}
},
new MindMapTreeNode
{
Id = "sub2",
Topic = "sub2-left",
Direction = MindMapNodeDirection.Left
}
}
}
};
async Task OnShowTree(EventArgs args)
{
// When the MindMap is displayed, expand all nodes
await _myTreeNodeContainer.Expand();
}
}
```