Skip to content

Commit 5546d44

Browse files
dkamburovdkamburov
authored
Add Open-Source Libraries topic for Blazor Getting Started (#1834)
2 parents 342440a + db17557 commit 5546d44

File tree

5 files changed

+358
-0
lines changed

5 files changed

+358
-0
lines changed

‎doc/en/components/general-getting-started-oss.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
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)

‎doc/en/components/general-getting-started.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Getting Started | {ProductName} | Infragistics
33
_description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts.
44
_keywords: {ProductName}, Infragistics, Getting Started
5+
_language: en
56
mentionedTypes: ["XamBulletGraph", "IgrGrid"]
67
---
78

‎doc/jp/components/general-getting-started-oss.md‎

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

‎docfx/en/components/toc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@
6060
"name": ".NET MAUI Blazor App",
6161
"href": "general-getting-started-blazor-maui.md",
6262
"status": ""
63+
},
64+
{
65+
66+
"name": "Open-Source Libraries",
67+
"href": "general-getting-started-oss.md",
68+
"status": "NEW"
6369
}
6470
]
6571
},

‎docfx/jp/components/toc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@
6060
"name": ".NET MAUI Blazor のアプリケーション",
6161
"href": "general-getting-started-blazor-maui.md",
6262
"status": ""
63+
},
64+
{
65+
66+
"name": "オープンソース ライブラリ",
67+
"href": "general-getting-started-oss.md",
68+
"status": "NEW"
6369
}
6470
]
6571
},

0 commit comments

Comments
 (0)