Blazor Segment Component

This is a Segment component for Blazor Web Assembly and Blazor Server. The full explanation of the source code is on PureSourceCode.com. Please leave your comment or question and use my forum. Please subscribe my YouTube channel.

How to use it

First, add the NuGet package in your project. The name of the package is PSC.Blazor.Components.Segments and the only dependency it has is Microsoft.AspNetCore.Components.Web (>= 5.0.10).

After that, in your wwwroot\index.html or in the hosts file, you have to add a theme (CSS) for your segment control. Obviously, you can create your own theme. So, use this code:

<link href="_content/PSC.Blazor.Components.Segments/themes/{theme-name}.css" rel="stylesheet" />

Out of the box, there are 4 themes (see below the images):

• Blue
• Green
• Red
• Light color

Then, in your _Imports.razor add this

@using PSC.Blazor.Components.Segments

Now, you are ready to use your segment control.

Example

As a user, I want to select a country from a list of countries. When I click on one of them, other data has to change accordingly.

So, in a page add the following code

<Segments OnSegmentChanged="OnSegmentChanged"> <Segment Text="Global" Value="global"></Segment> <Segment Text="Australia" Value="australia"></Segment> <Segment Text="Brazil" Value="brazil"></Segment> <Segment Text="Canada" Value="canada"></Segment> <Segment Text="France" Value="france"></Segment> <Segment Text="Germany" Value="germany"></Segment> <Segment Text="Italy" Value="italy"></Segment> <Segment Text="Spain" Value="spain"></Segment> <Segment Text="UK" Value="uk"></Segment> </Segments>

Each Segment has 2 properties:

• Text: the label you want to show to the user
• Value: the real value you want to use

The Segments has the property OnSegmentChanged that it is invoked every time a user click on a segment. So, define the function in your page the segment has to invoke like that

public async Task OnSegmentChanged(Segment segment) { // code to run }

Themes

There are 4 themes embedded in the segment control.

Blue

Green

Red

Light Colors

Other Blazor components

• DataTable for Blazor: DataTable component for Blazor WebAssembly and Blazor Server
• Markdown editor for Blazor: 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: Simple Modal Dialog for Blazor WebAssembly
• PSC.Extensions: 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�
• Quill for Blazor: 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
• Segment for Blazor: This is a Segment component for Blazor Web Assembly and Blazor Server
• Tabs for Blazor: This is a Tabs component for Blazor Web Assembly and Blazor Server