IntegralUI for Blazor, v24.3

IntegralUI for Blazor is UI library of advanced, customizable and high performance components for Blazor .NET.

Here is a brief overview of what is included:

Components

Button - Represents a button

ButtonGroup - Manages actions of multiple buttons arranged in group

Calendar - Enables the user to select a date using a visual monthly calendar display

Card - A flip card with two sides

CheckBox - Represents a check box

ContextMenu - Represents a multi-level shortcut menu

DatePicker - Allows the user to select a date by using a drop-down calendar

DropDown - Shows other components in a dropdown window

Grid - Displays tabular data sets with advanced Editing, Grouping, Pagination, Filtering, Sorting and more

List - Displays a simple list of items

ListBox - Displays a collection of items with content in custom layouts

ListView - Displays a collection of items using several different views

Menu - Allows you to create static or dynamic menus

Pager - Allows you to divide the content in multiple views

Panel - Generic container with option for content alignment

PopOver - Displays custom HTML content over specified element

ProgressBar - Visualize the progression of an operation

RadioButton - Represents a radio button

Rating - Visualizes ratings

Select - Allows you to select an item from a dropdown list

Slider - Allows changes to a numeric value within a range of defined minimum and maximum values

Tooltip - Adds a tooltip to an element

TreeList - Allows you to navigate through tree hierarchy showing only one list at a time

TreeView - Displays hierarchical data structures

Validator - Displays a notification message when data is invalid

Dependencies

IntegralUI for Blazor is built with .NET 8.0 framework.

DEMO

Online QuickStart App - An online demo of each component included

Installation

npm install https://github.com/lidorsystems/integralui-blazor.git

or directly from NPM

npm i integralui-blazor

Library files are located in /bin folder of product's installation directory.

1. Copy/Paste the NuGet package from /bin folder to a referencing folder (the folder from where you are referencing external or vendor libraries) in your project. The /resources folder is optional.
2. Install the NuGet package for IntegralUI library from a local folder.
3. Open your project
4. From Solution Explorer right-click on Dependencies option and select "Manage NuGet Packages..."
5. In top-right corner click on Tools icon to create new package source
6. Create a new package source by licking on + tool button
7. Under Name field enter IntegralUI and under Source field click on browse button to select your referencing folder and click Update button and press OK
8. The referencing folder should contain the NuGet package for IntegralUI library, the one copied from /bin folder (see first line above)
9. In NuGet package manager select the IntegralUI package source from the dropdown list (from top-right corner)
10. Select the Browse tab to see all available IntegraUI versions
11. Install the latest version
12. Close the NuGet package manager

Now you can use all components available in IntegralUI library. There are few namespaces that you can import:

IntegralUI.Components IntegralUI.Data IntegralUI.Events IntegralUI.Interfaces IntegralUI.Services IntegralUI.Styling

All components are located under IntegralUI.Components namespace.

How to Use IntegralUI components in Blazor Apps

At first, you need to install the IntegralUI for Blazor library on your side and add a reference to a component you want to use.

In case of IntegralUI Grid component, you need to do the following:

1. Open a Blazor page in your project
2. Add code line that will import the IntegralUI components
3. Place the Grid component using the IntegralUIGrid tag
4. Specify the generic TModel type that you will use as a data model
5. Set the DataSource property to connect the Grid to your data source
6. Define the columns in razor using the IntegralUIGridColumn tag where you can specify different properties and templates regarding Grid columns
7. (optional) Define the template that will be used to create the content for rows using the RowTemplate
8. (optional) Add custom HTML elements or other Blazor components inside the template
9. (optional) Add other features like sorting, filtering etc. require corresponding property or event to be set
10. (optional) Set up dynamic styles within Styles tag for specific target: Column, Row, Cell etc
11. (optional) Create a reference to the component using the @ref attribute, to call public methods

For example:

@page "/"

<IntegralUIGrid @ref=gridRef Id="grid-overview" TModel="CustomData" 
    DataSource="@gridRows"
    Size="@gridSize"
    ColumnClick="@gridColumnClick">
    <Columns>
        <IntegralUIGridColumn Field="Country" MenuItems="@gridMenuItems" MenuPositionAdjustment="@gridMenuPositionAdjustment" Width="350"></IntegralUIGridColumn>
        <IntegralUIGridColumn Field="Population" FormatSpecifier="N0" ContentAlignment="IntegralUIHorizontalAlignment.Right" Width="180"></IntegralUIGridColumn>
        <IntegralUIGridColumn Field="PercentWorld" HeaderText="% of World" FormatSpecifier="P2" ContentAlignment="IntegralUIHorizontalAlignment.Right" Width="150"></IntegralUIGridColumn>
        <IntegralUIGridColumn Field="Date" FormatSpecifier="dd MMM yyyy" ContentAlignment="IntegralUIHorizontalAlignment.Center" Width="180"></IntegralUIGridColumn>
        <IntegralUIGridColumn Field="Land" HeaderText="Land in km2" FormatSpecifier="N0" ContentAlignment="IntegralUIHorizontalAlignment.Right" Width="150"></IntegralUIGridColumn>
        <IntegralUIGridColumn Field="Capital" ContentAlignment="IntegralUIHorizontalAlignment.Center" Width="200"></IntegralUIGridColumn>
    </Columns>
    <RowTemplate>
        @switch (context.Cell?.Field)
        {
            case "Country":
                <div>
                    <span class="grid-sorting-flags @(getCountryIcon((string?)context.Row?.Country))"></span>
                    <span class="grid-sorting-country">@context.Row?.Country</span>
                </div>
                break;

            default:
                <div class="grid-sorting-cell-label">@context.DisplayValue</div>
                break;
        }
    </RowTemplate>
    <Styles>
        <IntegralUIStyle TargetType="IntegralUITargetType.Row" ConditionIndex="@evenOddStyle" Background="#f9f9f9"></IntegralUIStyle>
    </Styles>
</IntegralUIGrid>

@code {
    // Get a reference to the IntegralUI Grid component to call public methods
    private IntegralUIGrid<CustomData>? gridRef;

    // Data
    private class CustomData
    {
        public string? Country { get; set; }
        public int Population { get; set; } = 0;
        public double PercentWorld { get; set; } = 0;
        public DateTime Date { get; set; } = DateTime.Today;
        public int Land { get; set; } = 0;
        public string? Capital { get; set; }

        // State Properties
        public bool Selected { get; set; } = false;
    }

    // Define the component size
    public IntegralUISize ctrlSize = new() { Width = 350, Height = 300 };

    // Add data to the Grid component
    private List<CustomData> gridRows = new()
    {
        new CustomData()
        {
            Country = "Japan",
            Population = 123780000,
            PercentWorld = 0.015,
            Date = new DateTime(2024, 9, 1),
            Land = 364555,
            Capital = "Tokyo"
        },

        // . . .
    };

    // Specify the size of the Grid component
    public IntegralUISize gridSize = new() { Height = 400 };

    //
    // Handle the ColumnClick event to sort the Grid data whenever column is clicked
    //

    private void gridColumnClick(IntegralUIDataColumn column)
    {
        if (column is not null)
        {
            // Only change the order if same column is clicked
            if (prevSortColumn is not null && !EqualityComparer<IntegralUIDataColumn>.Default.Equals(column, prevSortColumn))
            {
                prevSortColumn.Selected = false;
                column.Sorting = prevSortColumn.Sorting;
            }
            else
            {
                switch (column.Sorting)
                {
                    case IntegralUISortOrder.Ascending:
                        column.Sorting = IntegralUISortOrder.Descending;
                        break;

                    case IntegralUISortOrder.Descending:
                        column.Sorting = IntegralUISortOrder.None;
                        break;

                    default:
                        column.Sorting = IntegralUISortOrder.Ascending;
                        break;
                }
            }

            prevSortColumn = column;

            // Call the Sort method
            gridRef?.Sort(column, column.Sorting ?? IntegralUISortOrder.Ascending);
        }
    }

    //
    // Change the Grid appearance using dynamic styles by providing a condition by which in this case rows are displayed in alternate colors 
    //

    private bool evenOddStyle(object? obj, int index)
    {
        return index % 2 == 1;
    }

}

QuickStart App

There is a demo application with source code that contains samples for each component included in the IntegralUI for Blazor product package. It can help you to get started quickly with learning about the components and write tests immediatelly.

The Quick Start project is available as part of IntegralUI QuickStart application project included with product package: IntegralUI for Blazor - Download.

License Information

You may use this product to develop Internet and Intranet web sites, web applications and other products. To unlock the product and remove Trial window from showing, you will need a license key.

This project has been released under the IntegralUI for Blazor License, and may not be used except in compliance with the License. A copy of the License should have been embedded within this project package or it can be found here: License Agreement.

This SOFTWARE is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language governing rights and limitations under the License.