👁 Image
Extensions.MudBlazor.StaticInput 4.1.0

<p align="center"> <img alt="MudBlazor.StaticInput" src="content/logo.png" style="width: 8%"/> <h1 align="center">MudBlazor.StaticInput</h1> </p>

👁 GitHub License
👁 GitHub Actions Workflow Status
👁 NuGet Version
👁 NuGet Downloads

📖 Introduction 📖

MudBlazor.StaticInput is an extension package for the MudBlazor library.

Tailored specifically for Static Server-Side Rendered (static SSR) pages. It offers seamless integration for some of MudBlazor's Component design into your static application pages. Focusing particularly on components designed for forms and edit forms, in situations where interactive components are not feasible. For example, when scaffolding Blazor Identity UI in your application.

Live Demo Application

<a href="https://github.com/0phois/MudBlazor.StaticInput/tree/master/demo/StaticSample"> <img alt="Static Input Demo" src="content/StaticInput.png" /> </a>

🤔 Why MudBlazor.StaticInput? 🤔

• Rapid Static SSR Integration: Effortlessly add MudBlazor components to your static SSR pages, saving development time.
• Focus on Forms: Streamline development of forms and edit forms, for use cases such as Microsoft Identity Login forms.
• Preserved Look & Feel: Maintains the consistent design and user experience of MudBlazor. Ensuring uniformity across all pages.
• Maintains Flexibility: By inheriting core MudBlazor components, StaticInput maintains the same flexibility as the original components.

🎁 What's Included 🎁

The set of components and features may extend over time. Currently, StaticInput components include:

MudStaticButton

<details> <summary> A Material Design button that supports form actions such as 'submit' and 'reset' </summary>

<MudStaticButton Variant="Variant.Filled" Color="Color.Primary">Login</MudStaticButton>

</details>

Note: <MudButton> is 100% functional in forms when used correctly. The static component simply assists in assuring the correct usage.

MudStaticCheckBox

<details> <summary> Checkboxes are a great way to allow the user to make a selection of choices. </summary>

<MudStaticCheckBox @bind-Value="@RememberMe" Color="Color.Success">Remember Me</MudStaticCheckBox>

@code{
 public bool RememberMe { get; set; }
}

</details>

MudStaticSwitch

<details> <summary> Similar to a checkbox but visually different. The switch lets the user <i>switch</i> between two values with the tap of a button. </summary>

<MudStaticSwitch @bind-Value="@RememberMe" Color="Color.Success" UnCheckedColor="Color.Primary">Remember Me</MudStaticSwitch>

@code{
 public bool RememberMe { get; set; }
}

</details>

MudStaticTextField

<details> <summary> Text field components are used for receiving user provided information </summary>

<MudStaticTextField @bind-Value="@Password" 
 InputType="InputType.Password" 
 Adornment="Adornment.End" 
 AdornmentIcon="@Icons.Material.Outlined.Visibility"
 AdornmentToggledIcon="@Icons.Material.Outlined.VisibilityOff"
 AdornmentClickFunction="showPassword" />

@code {
 public string Password { get; set; }
}

<script>
 const passwordTimeouts = new WeakMap();
 function showPassword(inputElement) {
 if (!inputElement) return;

 const existingTimeout = passwordTimeouts.get(inputElement);
 if (existingTimeout) clearTimeout(existingTimeout);

 if (inputElement.type === 'password') {
 inputElement.type = 'text';
 const timeoutId = setTimeout(function () {
 inputElement.type = 'password';
 passwordTimeouts.delete(inputElement);
 }, 5000);
 passwordTimeouts.set(inputElement, timeoutId);
 } else {
 inputElement.type = 'password';
 passwordTimeouts.delete(inputElement);
 }
 }
</script>

</details>

MudStaticRadioGroup

<details> <summary> Radio buttons allow the user to select one option from a set. </summary>

<MudStaticRadioGroup @bind-Value="@SelectedOption" Color="Color.Primary">
 <MudStaticRadio Value="@("Option 1")" Color="Color.Secondary">Option 1</MudStaticRadio>
 <MudStaticRadio Value="@("Option 2")">Option 2</MudStaticRadio>
</MudStaticRadioGroup>

@code {
 public string SelectedOption { get; set; } = "Option 1";
}

</details>

MudStaticNavDrawerToggle

<details> <summary> Open/Close a MudDrawer using a MudIconButton. When added, Responsive drawers also open/close based on page size changes. </summary>

<MudStaticNavDrawerToggle id="static-left-toggle" DrawerId="static-mini" Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />

<MudDrawer id="static-mini" Fixed="false" Elevation="1" Anchor="Anchor.Start" Variant="@DrawerVariant.Mini" ClipMode="DrawerClipMode.Always">
 <MudNavMenu>
 <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink>
 <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LibraryBooks">Library</MudNavLink>
 <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Group">Community</MudNavLink>
 </MudNavMenu>
</MudDrawer>

</details>

MudStaticNavGroup

<details> <summary> Collapse/Expand a MudStaticNavGroup by clicking on its title. Can be nested in a standard MudNavMenu </summary>

<MudNavMenu>
 <MudNavLink Href="/dashboard">Dashboard</MudNavLink>
 <MudNavLink Href="/servers">Servers</MudNavLink>
 <MudNavLink Href="/billing" Disabled="true">Billing</MudNavLink>

 <MudStaticNavGroup Title="Settings" Expanded="true">
 <MudNavLink Href="/users">Users</MudNavLink>
 <MudNavLink Href="/security">Security</MudNavLink>
 </MudStaticNavGroup>

 <MudNavLink Href="/about">About</MudNavLink>
</MudNavMenu>

</details>

🚀 Getting Started 🚀

To start using MudBlazor.StaticInput in your projects, simply install the package via NuGet Package Manager:

dotnet add package Extensions.MudBlazor.StaticInput

1. Register Services

Ensure MudBlazor services are registered in your Program.cs:

builder.Services.AddMudServices();

2. Automatic Initialization

The library utilizes a Blazor JS initializer to automatically load the necessary client-side logic. No manual script tags are required for the core functionality in Blazor Web Apps.

3. Usage

You can now start using the components in your Static SSR pages. For example, in an Identity login page:

<MudStaticTextField @bind-Value="@Input.Email" Label="Email" For="() => Input.Email" />