PSC.Blazor.Components.AnchorLink
1.0.3
dotnet add package PSC.Blazor.Components.AnchorLink --version 1.0.3
NuGet\Install-Package PSC.Blazor.Components.AnchorLink -Version 1.0.3
<PackageReference Include="PSC.Blazor.Components.AnchorLink" Version="1.0.3" />
<PackageVersion Include="PSC.Blazor.Components.AnchorLink" Version="1.0.3" />
<PackageReference Include="PSC.Blazor.Components.AnchorLink" />
paket add PSC.Blazor.Components.AnchorLink --version 1.0.3
#r "nuget: PSC.Blazor.Components.AnchorLink, 1.0.3"
#:package PSC.Blazor.Components.AnchorLink@1.0.3
#addin nuget:?package=PSC.Blazor.Components.AnchorLink&version=1.0.3
#tool nuget:?package=PSC.Blazor.Components.AnchorLink&version=1.0.3
AnchorLink for Blazor
An anchor link is a web link that allows users to leapfrog to a specific point on a website page. It saves them the need to scroll and skim read and makes navigation easier.
We have anchor (HTML tag a) everywhere and it is quite easy to create one
<a href="https://yourlink">Try me</a>
In HTML, you can add links in the same page using the # for example:
<a href="#chaper1">Jump to Chapter 1</a>
<h2 id="chapter1">Chapter 1</h2>
<p style="margin-bottom: 120px;">
A paragraph with a huge bottom margin to make the page scroll.
</p>
When you click on the first link, the browser jumps to the h2 with id chapter1. Easy right? Unfortunately, we can't use this kind of link in Blazor.
How to use it
This component uses a bit of JavaScript to jump to the position with the requested id. For that, in the index.html you have to add in the script section at the end of the page the following line:
<script src="_content/PSC.Blazor.Components.AnchorLink/js/anchorLink.js"></script>
Then, in your page you have to replace the a with the component AnchorLink. Using the example above, the code becomes:
<AnchorLink href="#chaper1">Jump to Chapter 1</AnchorLink>
<h2 id="chapter1">Chapter 1</h2>
<p style="margin-bottom: 120px;">
A paragraph with a huge bottom margin to make the page scroll.
</p>
Easy peasy!
PureSourceCode.com
PureSourceCode.com is my personal blog where I publish posts about technologies and in particular source code and projects in .NET.
In the last few months, I created a lot of components for Blazor WebAssembly and Blazor Server.
My name is Enrico Rossini and you can contact me via:
Blazor Components
| Component name | Forum | NuGet | Website | Description |
|---|---|---|---|---|
| AnchorLink | Forum | An anchor link is a web link that allows users to leapfrog to a specific point on a website page. It saves them the need to scroll and skim read and makes navigation easier. This component is for Blazor WebAssembly and Blazor Server | ||
| Autocomplete for Blazor | Forum | Simple and flexible autocomplete type-ahead functionality for Blazor WebAssembly and Blazor Server | ||
| Browser Detect for Blazor | Forum | Demo | Browser detect for Blazor WebAssembly and Blazor Server | |
| ChartJs for Blazor | Forum | Demo | Add beautiful graphs based on ChartJs in your Blazor application | |
| Clippy for Blazor | Forum | Demo | Do you miss Clippy? Here the implementation for Blazor | |
| CodeSnipper for Blazor | Forum | Add code snippet in your Blazor pages for 196 programming languages with 243 styles | ||
| Copy To Clipboard | Forum | Add a button to copy text in the clipboard | ||
| DataTable for Blazor | Forum | Demo | DataTable component for Blazor WebAssembly and Blazor Server | |
| Google Tag Manager | Forum | Demo | Adds Google Tag Manager to the application and manages communication with GTM JavaScript (data layer). | |
| Icons and flags for Blazor | Forum | Library with a lot of SVG icons and SVG flags to use in your Razor pages | ||
| ImageSelect for Blazor | Forum | This is a Blazor component to display a dropdown list with images based on ms-Dropdown by Marghoob Suleman. This component is built with NET7 for Blazor WebAssembly and Blazor Server | ||
| Markdown editor for Blazor | Forum | Demo | This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users. | |
| Modal dialog for Blazor | Forum | Simple Modal Dialog for Blazor WebAssembly | ||
| Modal windows for Blazor | Forum | Modal Windows for Blazor WebAssembly | ||
| Quill for Blazor | Forum | Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application | ||
| ScrollTabs | Tabs with nice scroll (no scrollbar) and responsive | |||
| Segment for Blazor | Forum | This is a Segment component for Blazor Web Assembly and Blazor Server | ||
| Tabs for Blazor | Forum | This is a Tabs component for Blazor Web Assembly and Blazor Server | ||
| Timeline for Blazor | Forum | This is a new responsive timeline for Blazor Web Assembly and Blazor Server | ||
| Toast for Blazor | Forum | Toast notification for Blazor applications | ||
| Tours for Blazor | Forum | Guide your users in your Blazor applications | ||
| TreeView for Blazor | Forum | This component is a native Blazor TreeView component for Blazor WebAssembly and Blazor Server. The component is built with .NET7. | ||
| WorldMap for Blazor | Forum | Demo | Show world maps with your data |
C# libraries for .NET6
| Component name | Forum | NuGet | Description |
|---|---|---|---|
| PSC.Evaluator | Forum | PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions. | |
| PSC.Extensions | Forum | A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions... |
More examples and documentation
Blazor
- Write a reusable Blazor component
- Getting Started With C# And Blazor
- Setting Up A Blazor WebAssembly Application
- Working With Blazor Component Model
- Secure Blazor WebAssembly With IdentityServer4
- Blazor Using HttpClient With Authentication
- InputSelect component for enumerations in Blazor
- Use LocalStorage with Blazor WebAssembly
- Modal Dialog component for Blazor
- Create Tooltip component for Blazor
- Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs
- ChartJs component for Blazor
- Labels and OnClickChart for ChartJs
Blazor & NET8
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.11)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.