https://github.com/izzyjere/guavasoft.links
Anchor Navigation tool that automatically scrolls a page to an anchor.
https://github.com/izzyjere/guavasoft.links
Last synced: over 1 year ago
JSON representation
Anchor Navigation tool that automatically scrolls a page to an anchor.
- Host: GitHub
- URL: https://github.com/izzyjere/guavasoft.links
- Owner: izzyjere
- License: mit
- Created: 2022-11-11T09:53:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-11T13:22:22.000Z (over 3 years ago)
- Last Synced: 2025-01-22T03:13:07.226Z (over 1 year ago)
- Language: C#
- Size: 10.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
GuavaSoft Blazor Anchor Navigation Tool built on top of DevExpress Anchor with no javascript require
The GuavaSoft Anchor Navigation tool automatically scrolls a page to an anchor in the following instances:
* When an end-user clicks a hyperlink with an anchor;
The tool also includes the Blazor **AnchorLink** component. Use this component to create in-page navigation links as needed:
```html
My Section 1
```
When an end-user clicks the link, the page scrolls to the corresponding anchor:
```html
Section 1
Lorem ipsum dolor sit amet...
Section 2
Quisque imperdiet risus quis nisl vulputate...
```
## Usage
Follow the steps below to add the tool to your Blazor application.
1. Adding it to your project with nuget
**Package Manager**
```sh
Install-Package Guavasoft.Links -Version 1.0.0
```
**.NET CLI**
```sh
dotnet add package Guavasoft.Links --version 1.0.0
```
**PackageReference**
```sh
```
2. Register the **GuavaSoft.Links** namespace in the _\_Imports.razor_ file:
```csharp
@using GuavaSoft.Links
```
3. Add the non-visual **AnchorLinkProvider** component to the _Shared/MainLayout.razor_ file:
(Optional)Provide the OffsetSelector parameter with your pinned (non-scrollable) header css selector (like .top-row in the standard Blazor project)
```html
...
@Body
```