Skip to content

Upgrade TailBlazor progress bar for .NET 9 auto render #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TaylorWatson wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Upgrade TailBlazor progress bar for .NET 9 auto render #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,8 @@ Using animation-pulse on the `class` parameter brings the bar into focus for the

### 4. Adjusting progress

Pass an int from 0-100 into the `Percentage` parameter to have it automatically update it's position. Adjust this percentage on the fly to have it update in real time.
Pass an int from 0-100 into the `Percentage` parameter to have it automatically update it's position. Adjust this percentage on the fly to have it update in real time.

### 5. Blazor auto render mode support

The component library now targets .NET 9 and ships as a Razor class library, so it can be referenced from Blazor applications running in Auto render mode without any additional configuration. When the `Percentage` value changes on the server or in the browser, the component automatically clamps the value between 0 and 100 and re-renders correctly in both interactive server and WebAssembly contexts.
19 changes: 9 additions & 10 deletions src/TailBlazor.ProgressBar/TailBlazor.ProgressBar.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net9.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<PackageId>TailBlazor.ProgressBar</PackageId>
<RootNamespace>TailBlazor.ProgressBar</RootNamespace>
<Version>1.0.2</Version>
Expand All @@ -23,13 +25,10 @@
<PackageLicenseExpression>MIT</PackageLicenseExpression>
</PropertyGroup>

<ItemGroup>
<SupportedPlatform Include="browser" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.0.1" />
</ItemGroup>
<ItemGroup>
<SupportedPlatform Include="browser" />
<FrameworkReference Include="Microsoft.AspNetCore.App" />
Comment on lines +28 to +30
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Avoid framework reference that breaks WASM consumers

Auto render mode relies on this Razor class library being referenceable from both server and WebAssembly projects. Replacing the package reference with <FrameworkReference Include="Microsoft.AspNetCore.App" /> makes the library depend on the ASP.NET Core shared framework, which isn’t available when restoring or publishing a Blazor WebAssembly app. Any WASM (and therefore Auto mode) project that adds this package will now fail during restore with an unsupported framework error. Keep the project framework-agnostic (no explicit reference or a Microsoft.AspNetCore.Components.Web package) so it works for both environments.

Useful? React with 👍 / 👎.

</ItemGroup>

<ItemGroup>
<None Include="../../logo.png" Pack="true" PackagePath="">
Expand Down
4 changes: 2 additions & 2 deletions src/TailBlazor.ProgressBar/TailBlazorProgressBar.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@namespace TailBlazor.ProgressBar

<div class="overflow-hidden @BackgroundClass">
<span class="flex h-@(Height) @Class" style="width:@(_percentage)%"></span>
<div class="overflow-hidden @(BackgroundClass ?? string.Empty)">
<span class="flex h-@(Height) @(Class ?? string.Empty)" style="width:@(_percentage)%"></span>
</div>
11 changes: 5 additions & 6 deletions src/TailBlazor.ProgressBar/TailBlazorProgressBar.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;

namespace TailBlazor.ProgressBar
{
public partial class TailBlazorProgressBar
{
[Parameter] public string Class { get; set; } = "rounded bg-gradient-to-br animate-pulse from-purple-500 to-red-600";
[Parameter] public string? Class { get; set; } = "rounded bg-gradient-to-br animate-pulse from-purple-500 to-red-600";
[Parameter] public int Percentage { get; set; } = 50;
[Parameter] public int Height { get; set; } = 2;
[Parameter] public string BackgroundClass { get; set; } = "bg-gray-100 rounded";
[Parameter] public string? BackgroundClass { get; set; } = "bg-gray-100 rounded";

private int _percentage = 50;

protected override void OnInitialized() {
_percentage = Percentage > 100 ? 100 : Percentage < 0 ? 0 : Percentage;
StateHasChanged();
protected override void OnParametersSet()
{
_percentage = Math.Clamp(Percentage, 0, 100);
}
}
}