This repository contains over 300 examples on how to use Ignite UI for Blazor components:
- Charts: Area, Bar, Column, Composite, Donut, Financial/Stock, Line, Pie, Polar, Radial, Scatter, Shape, Sparkline, Stacked, Step,
- Maps: Geographic Map, Treemap,
- Gauges: Bullet Graph, Linear Gauge, Radial Gauges
- Grids: Table / Grid, Excel Library
- Other: Dock Manager, Date Picker, Multi-Column Combobox
You can run each sample project individually from the ./samples folder or you can browse all samples in one website from the ./browser folder.
You can preview and browse all samples in this repository by opening our Blazor Samples Browser. Alternatively, you you can view these samples with detailed information in our Blazor Help Documentation.
In addition, you can run each sample project individually from the ./samples folder or you can run from the ./browser folder to browse all samples in one website (see instructions below).
To set up this project locally, clone this repository:
git clone https://github.com/IgniteUI/igniteui-blazor-examples.git
NOTE: You should use master branch of this repository if you want to run samples on your computer. Use the vnext branch only when you want to contribute new samples to this repository.
Note, this repo is targeting .NET 8.0 and Visual Studio 2022. VS 2019 does not support .NET 8.0.
-
check out the master branch
-
in VS 2022, open a solution file from the ./samples folder, e.g.
./samples/charts/category-chart/overview/BlazorClientApp.csproj
-
right click solution and select Restore NuGet Packages menu item
-
click Debug menu and select Start Debugging or press F5 key
-
Wait until the build is completed and then open http://localhost:4200 in your browser
At this point, you should see a website with a single example of Ignite UI for Blazor component.
-
check out the master branch
-
open VS Code as Administrator
-
open the ./browser/IgBlazorSamples.Gulp folder
-
select View - Terminal menu item
-
type
npm install
command -
type
gulp copySamplesToClient
command -
wait until all samples are copied to the browser client app
-
in VS 2022, open ./browser/IgBlazorSamplesBrowser.sln
-
right click solution and select Restore NuGet Packages menu item
-
click Debug menu and select Start Debugging or press F5 key
-
Wait until the build is completed and then open http://localhost:4200 in your browser
At this point, you should see a website hosted all examples of Ignite UI for Blazor components.
NOTE Do NOT find replace version of packages in package.json files.
- open this repo in VS Code
- open ./browser/IgBlazorSamples.Gulp/tasks/gulp-samples.js file
- navigate to the
updateIG
function - update version of packages in
packageUpgrades
array - open terminal window
- run
cd browser/IgBlazorSamples.Gulp
command - run
npm install --legacy-peer-deps
command - run the
gulp updateIG
command - create AND merge a pull request with changes in all *.csproj files in this repository
- create 2nd pull request with similar changes in
/editor-templates/Blazor/main-template/BlazorClientApp.csproj
of the igniteui-xplat-examples repository.