Skip to content

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

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 #1

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" />
</ItemGroup>
Comment on lines +28 to +31
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 server-only framework reference in RCL

Switching the project to net9.0 replaced the Microsoft.AspNetCore.Components.Web package with a FrameworkReference to Microsoft.AspNetCore.App. Framework references are only valid for server-hosted components and aren’t supported when the library is referenced from a net9.0-browser or Blazor WebAssembly project. Because Auto render mode needs to load the same component assembly in both server and browser contexts, this change prevents the package from being consumed by the client half of an Auto app and breaks the commit’s stated goal. Consider keeping the package reference or multi-targeting so the browser build doesn’t transitively depend on Microsoft.AspNetCore.App.

Useful? React with 👍 / 👎.


<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);
}
}
}