Blazor UI tips and tricks

This project was created to help me learn and remember some basic CSS UI tricks that are implemented for a Blazor Application.

by David Gallivan

Why

Blazor is a new and exciting new SPA framework that allows me to build interactive web applications using C# that runs in the browser. Blazor allows me to use my existing skills with a single tool set to build highly interactive web app.

Live Demos

Hosted in Azure

Getting Started

1. Clone this repository

   git clone https://github.com/CodingWithDavid/BlazorUITipsAndTricks
   cd BlazorUITipsAndTricks

2. Open in Visual Studio or Visual Code a. With Visual Code you will need to install the C# extensions

3. Press F5

What's in the App

I am using the basic Server side Blazor template and adding the different UI tips and tricks. These tips and tricks can be added to any Blazor application configuration. Each separate tip or trick can be found on the left side navigation.

Spinner

This shows how to provide a visual feedback to the user on a long running process. The actual UI of the spinner can be any CSS styled spinner.

Problems or Suggestions

Open an issue here

Thank You

Resources

• VS Code
• Visual Studio
• Azure Free Trial
• VS Code Extension Marketplace
• VS Code - macOS keys
• VS Code - Windows keys