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:
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
IntegralUI for Blazor is built with .NET 8.0 framework.
Online QuickStart App - An online demo of each component included
npm install https://github.com/lidorsystems/integralui-blazor.gitor directly from NPM
npm i integralui-blazorLibrary files are located in /bin folder of product's installation directory.
- 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.
- Install the NuGet package for IntegralUI library from a local folder.
- Open your project
- From Solution Explorer right-click on Dependencies option and select "Manage NuGet Packages..."
- In top-right corner click on Tools icon to create new package source
- Create a new package source by licking on + tool button
- 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
- The referencing folder should contain the NuGet package for IntegralUI library, the one copied from /bin folder (see first line above)
- In NuGet package manager select the IntegralUI package source from the dropdown list (from top-right corner)
- Select the Browse tab to see all available IntegraUI versions
- Install the latest version
- 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.
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:
- Open a Blazor page in your project
- Add code line that will import the IntegralUI components
- Place the Grid component using the IntegralUIGrid tag
- Specify the generic TModel type that you will use as a data model
- Set the DataSource property to connect the Grid to your data source
- Define the columns in razor using the IntegralUIGridColumn tag where you can specify different properties and templates regarding Grid columns
- (optional) Define the template that will be used to create the content for rows using the RowTemplate
- (optional) Add custom HTML elements or other Blazor components inside the template
- (optional) Add other features like sorting, filtering etc. require corresponding property or event to be set
- (optional) Set up dynamic styles within Styles tag for specific target: Column, Row, Cell etc
- (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;
}
}
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.
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.