https://github.com/skordesign/Blazor.GuidePopup
Guidelines popup for Blazor
https://github.com/skordesign/Blazor.GuidePopup
asp-net-core blazor csharp dotnet microsoft netcore razor web-assembly webassembly
Last synced: 11 months ago
JSON representation
Guidelines popup for Blazor
- Host: GitHub
- URL: https://github.com/skordesign/Blazor.GuidePopup
- Owner: skordesign
- Created: 2019-04-08T14:44:43.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-09T08:21:34.000Z (over 5 years ago)
- Last Synced: 2024-10-24T10:06:28.922Z (over 1 year ago)
- Topics: asp-net-core, blazor, csharp, dotnet, microsoft, netcore, razor, web-assembly, webassembly
- Language: C#
- Size: 688 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Polarizelab.Blazor.GuidePopup
Guidelines popup for Blazor
### Usage
#### 1.Installation
Nuget: [Blazor.GuidePopup](https://www.nuget.org/packages/Polarizelab.Blazor.GuidePopup)
#### 2.Add service
```csharp
builder.Services.AddGuider();
// also use with options
// builder.Services.AddGuider(options => {
// options.PopupClassName = "your-class";
///...
//})
```
and in index.html
```html
...
...
...
...
```
#### 3.Inject service and use it
```csharp
@page "/"
@inject Polarizelab.Blazor.GuidePopup.IGuider Guider
@functions{
ElementReference showPopupNearMe;
protected override void OnInitialized()
{
base.OnInitialized();
Guider.Show("elementId", "Content", GuidePosition.Right);
// you can use it with ElementRef or X,Y
// Guider.Show(showPopupNearMe, "Content", GuidePosition.Bottom);
// Guider.Show(200, 400, "Content", GuidePosition.TopLeft);
Guider.OnClosed += OnClosed;
}
private void OnClosed(object sender, System.EventArgs args)
{
Console.WriteLine("Closed");
}
}
```
#### Use GuideLines
```csharp
@inject Polarizelab.Blazor.GuidePopup.IGuider Guider
@code{
ElementReference showPopupNearMe;
private void ShowGuidline(){
Guider.Make("elementId", "Content", GuidePosition.Right)
.Make(showPopupNearMe, "Content", GuidePosition.Bottom)
.Make(300, 300, "Test 3")
.Start();
}
}
```
##### Note: The Guider will create new element and add it to inside of `body` tag, when close it will removed. If you have any idea for this package,feel free create new issue on this repository.
#### Demo
