|
| 1 | +--- |
| 2 | +title: Getting Started | {ProductName} Open-Source Libraries | Infragistics |
| 3 | +_description: Use Infragistics' Open-Source {Platform} components to create apps with lightweight, MIT licensed components including Grid Lite. Try now. |
| 4 | +_keywords: {ProductName}, Infragistics, Getting Started, Open-Source, MIT License |
| 5 | +mentionedTypes: [] |
| 6 | +--- |
| 7 | +# Getting Started with Open-Source Libraries |
| 8 | + |
| 9 | +This topic provides step-by-step instructions for creating Blazor applications with the Ignite UI for Blazor open-source libraries using Visual Studio. |
| 10 | + |
| 11 | +## Overview |
| 12 | + |
| 13 | +{ProductName} offers open-source UI components under the MIT license. These lightweight packages provide essential functionality for building modern web applications without requiring a commercial license. |
| 14 | + |
| 15 | +The open-source libraries include: |
| 16 | + |
| 17 | +- **IgniteUI.Blazor.Lite** - A lightweight package containing open-source UI components |
| 18 | +- **IgniteUI.Blazor.GridLite** - A lightweight, open-source data grid component |
| 19 | + |
| 20 | +## Create a New Blazor Project |
| 21 | + |
| 22 | + - Start Visual Studio and click **Create a new project** on the start page, select a Blazor template such as **Blazor Server App**, **Blazor WebAssembly App**, or **Blazor Web App**, and click **Next**. |
| 23 | + |
| 24 | +> [!Note] |
| 25 | +> When using **Blazor Server App**, ensure you add `@rendermode InteractiveServer` in the pages where the components are used. |
| 26 | +
|
| 27 | +- Provide a project name and location, then click **Next**. |
| 28 | + |
| 29 | +- Specify additional project options and click **Create**. |
| 30 | + |
| 31 | +## Install IgniteUI.Blazor.Lite |
| 32 | + |
| 33 | +The IgniteUI.Blazor.Lite package contains open-source UI components delivered via NuGet. |
| 34 | + |
| 35 | +> [!Note] |
| 36 | +> You should not combine the **IgniteUI.Blazor** and **IgniteUI.Blazor.Lite** packages in the same project. They use the same namespaces and contain duplicate components, so only one of them should be used. |
| 37 | +
|
| 38 | +In Visual Studio, open the NuGet package manager by selecting **Tools** → **NuGet Package Manager** → **Manage NuGet Packages for Solution**. Search for and install the **IgniteUI.Blazor.Lite** NuGet package. |
| 39 | + |
| 40 | +Or install via the Package Manager Console: |
| 41 | + |
| 42 | +```cmd |
| 43 | +Install-Package IgniteUI.Blazor.Lite |
| 44 | +``` |
| 45 | + |
| 46 | +Or via .NET CLI: |
| 47 | + |
| 48 | +```cmd |
| 49 | +dotnet add package IgniteUI.Blazor.Lite |
| 50 | +``` |
| 51 | + |
| 52 | +## Register IgniteUI.Blazor.Lite |
| 53 | + |
| 54 | +### .NET 6 and Later Applications |
| 55 | + |
| 56 | +1 - Open the **Program.cs** file and register the Ignite UI for Blazor Service by calling **builder.Services.AddIgniteUIBlazor** function: |
| 57 | + |
| 58 | +```razor |
| 59 | +var builder = WebApplication.CreateBuilder(args); |
| 60 | +
|
| 61 | +// Add services to the container. |
| 62 | +builder.Services.AddRazorPages(); |
| 63 | +builder.Services.AddServerSideBlazor(); |
| 64 | +
|
| 65 | +builder.Services.AddIgniteUIBlazor(); |
| 66 | +
|
| 67 | +var app = builder.Build(); |
| 68 | +``` |
| 69 | + |
| 70 | +2 - Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file: |
| 71 | + |
| 72 | +```razor |
| 73 | +@using IgniteUI.Blazor.Controls |
| 74 | +``` |
| 75 | + |
| 76 | +3 - Add the Style Sheet in the appropriate location based on your project type: |
| 77 | + |
| 78 | +```razor |
| 79 | +<head> |
| 80 | + <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" /> |
| 81 | +</head> |
| 82 | +``` |
| 83 | + |
| 84 | +4 - Add Script Reference: |
| 85 | + |
| 86 | +```razor |
| 87 | +<script src="_content/IgniteUI.Blazor/app.bundle.js"></script> |
| 88 | +``` |
| 89 | + |
| 90 | +## Using the OSS Blazor Components |
| 91 | + |
| 92 | +Add an Ignite UI for Blazor component to your razor page, for example: |
| 93 | + |
| 94 | +```razor |
| 95 | +<IgbCard style="width:350px"> |
| 96 | + <IgbCardMedia> |
| 97 | + <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" /> |
| 98 | + </IgbCardMedia> |
| 99 | + <IgbCardHeader> |
| 100 | + <h4>Jane Doe</h4> |
| 101 | + <h6>Professional Photographer</h6> |
| 102 | + </IgbCardHeader> |
| 103 | + <IgbCardContent>Hi! I'm Jane, photographer and filmmaker. |
| 104 | + Photography is a way of feeling, of touching, |
| 105 | + of loving. What you have caught on film is captured forever... |
| 106 | + it remembers little things, long after you have |
| 107 | + forgotten everything.</IgbCardContent> |
| 108 | + <IgbCardActions> |
| 109 | + <IgbButton>More Info</IgbButton> |
| 110 | + </IgbCardActions> |
| 111 | +</IgbCard> |
| 112 | +``` |
| 113 | + |
| 114 | +For more detailed information about which components are included in the light package, see the - [Open-Source vs Premium Components](general-open-source-vs-premium.md) topic. |
| 115 | + |
| 116 | +## Grid Lite |
| 117 | + |
| 118 | +The Grid Lite component is a lightweight, open-source data grid that provides essential features for displaying tabular data. |
| 119 | + |
| 120 | +### Install IgniteUI.Blazor.GridLite |
| 121 | + |
| 122 | +In Visual Studio, open the NuGet package manager by selecting **Tools** → **NuGet Package Manager** → **Manage NuGet Packages for Solution**. Search for and install the **IgniteUI.Blazor.GridLite** NuGet package. |
| 123 | + |
| 124 | +Or install via the Package Manager Console: |
| 125 | + |
| 126 | +```cmd |
| 127 | +Install-Package IgniteUI.Blazor.GridLite |
| 128 | +``` |
| 129 | + |
| 130 | +Or via .NET CLI: |
| 131 | + |
| 132 | +```cmd |
| 133 | +dotnet add package IgniteUI.Blazor.GridLite |
| 134 | +``` |
| 135 | +### Using Grid Lite |
| 136 | + |
| 137 | +1 - Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file: |
| 138 | + |
| 139 | +```razor |
| 140 | +@using IgniteUI.Blazor.Controls |
| 141 | +``` |
| 142 | + |
| 143 | +2 - Add the Style Sheet in the appropriate location based on your project type: |
| 144 | + |
| 145 | +```razor |
| 146 | +<head> |
| 147 | + <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" /> |
| 148 | +</head> |
| 149 | +``` |
| 150 | + |
| 151 | +3 - Add the Grid Lite component to your razor page: |
| 152 | + |
| 153 | +```razor |
| 154 | +<IgbGridLite Data="data" AutoGenerateColumns="true"> |
| 155 | +</IgbGridLite> |
| 156 | +
|
| 157 | +@code { |
| 158 | + private object[] data = new object[] |
| 159 | + { |
| 160 | + new { Name = "John", Age = 30, City = "New York" }, |
| 161 | + new { Name = "Jane", Age = 25, City = "Los Angeles" }, |
| 162 | + new { Name = "Bob", Age = 35, City = "Chicago" } |
| 163 | + }; |
| 164 | +} |
| 165 | +``` |
| 166 | + |
| 167 | +For more detailed information about Grid Lite features and configuration, see the [Grid Lite Overview](grid-lite/overview.md) topic. |
| 168 | + |
| 169 | +## Additional Resources |
| 170 | + |
| 171 | +- [Open-Source vs Premium Components](general-open-source-vs-premium.md) |
| 172 | +- [Grid Lite Overview](grid-lite/overview.md) |
0 commit comments