KNM.RazorComponents 0.5.9-alpha

Overview

This library provides a set of reusable Razor components designed to work seamlessly with Blazor and .NET MAUI Hybrid applications.
Each component supports isolated CSS and optional JavaScript assets to keep styles and behaviors encapsulated and easy to maintain.

Features

• Reusable, strongly-typed Razor components for Blazor and MAUI Hybrid.
• Isolated CSS per component to avoid style conflicts across the app.
• Optional JS interop for advanced UI behavior (loaded via _content/KNM.RazorComponents/...).
• Bootstrap-friendly markup and classes for rapid UI composition.

Installation

Install the package from your NuGet feed (private):

dotnet add package KNM.RazorComponents

Or via project file:

<ItemGroup>
   <PackageReference Include="KNM.RazorComponents" Version="1.0.0" />
</ItemGroup>

Setup

Add the library CSS to your wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server):

    <link rel="stylesheet" href="_content/KNM.RazorComponents/knm.razorcomponents.css" />

Input Types (KnmInputType)

The month and week types use HTML standard formats (yyyy-MM and yyyy-Www) to ensure browser compatibility and native validation.

Layout Types (LayoutType)

Supporting Classes

Special Parameters

Getting started

1. Add the namespace to your _Imports.razor (or equivalent):

@using KNM.RazorComponents

2. Use a basic text input component in a Blazor page:

@page "/example"

<EditForm Model="@model">
    <KNMInputs binding="@model.Name"
               CustomClass="outbound mt-4"
               Layout="LayoutType.Vertical"
               Size="KnmInputSize.Medium" />
</EditForm>

@code {
    private DemoModel model = new();
}

Attributes

[AttributeUsage(AttributeTargets.Property)]
public class KnmInputAttribute : Attribute
{
    public KnmInputType InputType { get; set; } = KnmInputType.Text;
    public string Label { get; set; } = string.Empty;
    public string Placeholder { get; set; } = string.Empty;
    public string HelperText { get; set; } = string.Empty;
    public bool ShowInGrid { get; set; } = true;             // Grid/Table view
    public string LookupObject { get; set; } = string.Empty; // Lookup reference
    public int Order { get; set; } = 0;                      // Visualization Order
}

[AttributeUsage(AttributeTargets.Property)]
public class KnmSelectOptionsAttribute : Attribute
{
    public Type? OptionsType { get; set; }
    public string ValueProperty { get; set; } = "Id";
    public string LabelProperty { get; set; } = "Value";
}

Example model with attributes

public class DemoModel
{
    [KnmInput(ShowInGrid = false)]
    public int Id { get; set; }

    [Required]
    [KnmInput(InputType = KnmInputType.Text,
              Label = "Full name",
              Placeholder = "Enter your Name",
              Order = 1)]
    public string Name { get; set; } = string.Empty;

    [Required]
    [KnmInput(InputType = KnmInputType.Password,
              Label = "Password",
              Placeholder = "Enter your Password",
              HelperText = "The password should be 12 digits, Upper and lower letters and at least 1 special char",
              Order = 2)]
    public string Email { get; set; } = string.Empty;
}