IntegralUI.Lite.Blazor 24.3.0

IntegralUI Lite for Blazor, v24.3

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

FREE for commercial use.

This library is a lite version of the full product package: IntegralUI for Blazor. Some of the more advanced component features are excluded in this version.

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

DropDown - Shows other components in a dropdown window

List - Displays a simple list of items with content in custom layouts

PopOver - Displays custom HTML content over specified element

RadioButton - Represents a radio button

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

Tooltip - Adds a tooltip to an element

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

Dependencies

IntegralUI Lite for Blazor is built with .NET 8.0 framework.

DEMO

Online QuickStart App - An online demo of each component included

Installation

Once you complete installation of the latest version, you can use all components available in the IntegralUI for Blazor 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 Lite for Blazor library on your side and add a reference to a component you want to use (see above steps).

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

1. Open a Blazor page in your project
2. Add code line that will import the IntegralUI Lite components
3. Place the List component using the IntegralUIList tag
4. Specify the generic TItem type that you will use as a data model
5. Set the Items property to connect the List to your data source
6. (optional) Define the template that will be used to create the content for items using the ItemTemplate
7. (optional) Add custom HTML elements or other Blazor components inside the template
8. (optional) Add other features like sorting, filtering etc. require corresponding property or event to be set
9. (optional) Create a reference to the component using the @ref attribute, to call public methods

For example:

@page "/"

<IntegralUIList @ref=listRef Id="list-sample" TItem="CustomItem"
    Items="@items"
    MouseWheelSpeed="IntegralUISpeedMode.VerySlow"
    Size="@ctrlSize">
    <ItemTemplate>
        <span>@context.Item?.Text</span>
    </ItemTemplate>
</IntegralUIList>

@code {
    // Get a reference to the IntegralUI TreeView component to call public methods
    private IntegralUIList<CustomItem>? listRef;

    // Data model
    public class CustomItem
    {
        public string? Id { get; set; }
        public string? Genre { get; set; }
        public double Rating { get; set; }
        public bool Selected { get; set; } = false;
        public string? Text { get; set; }
        public int Year { get; set; }
    }

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

    // Add items to the List component
    public List<CustomItem> items = new()
    {
        new CustomItem { Id = "1", Genre = "Sci-Fi", Text = "Star Trek", Year = 2009, Rating = 8 },
        new CustomItem { Id = "2", Genre = "Adventure", Text = "Cast Away", Year = 2000, Rating = 7 },
        new CustomItem { Id = "3", Genre = "Action", Text = "Gladiator", Year = 2000, Rating = 8 },

        // . . .
    };
}

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 are FREE to use this product to develop Internet and Intranet web sites, web applications and other products, with no-charge.

This project has been released under the IntegralUI Lite for Blazor License, and may not be used except in compliance with the License. A copy of the License should have been installed in the product's root installation directory 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.