Getting Started with Blazor Playground
21 Feb 20242 minutes to read
The Blazor playground allows you to develop and test any Blazor component, including both general components and pre-built Syncfusion Blazor components.
Blazor Component
You can create a Blazor component in Blazor playground by following the given steps below:
- Open the Blazor Playground URL in your browser.
- Add the code in __Index.razor,
<!-- ColorPicker.razor -->
@page "/colorpicker"
<h3>Color Picker</h3>
<div class="color-palette">
@foreach (var color in ColorPalette)
{
<div class="color" style="background-color: @color" @onclick="() => SelectColor(color)"></div>
}
</div>
<p>Selected Color: @selectedColor</p>
@code {
private List<string> ColorPalette = new List<string>
{
"#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"
};
private string selectedColor = "#ff0000";
private void SelectColor(string color)
{
selectedColor = color;
}
}
<style>
.color-palette {
display: flex;
flex-wrap: wrap;
}
.color {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
border: 2px solid #fff;
}
.color:hover {
border: 2px solid #000;
}
</style>
- Press the
run
button or Ctrl+R to execute the code. The output of the executed code will appear in the result view.
Syncfusion Blazor Component
As Syncfusion Blazor playground comes pre-configured with Syncfusion.Blazor
package, stylesheet, script, and namespace are included with the application. To render Syncfusion components in Blazor playground, follow the steps given below:
- Import the
Syncfusion.Blazor
andSyncfusion.Blazor.Calendars
namespace on top of the code editor.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars
- Add the Blazor Calendar component in the code editor.
<SfCalendar TValue="DateTime"></SfCalendar>
- Press the
run
button or Ctrl+R to execute the code. The output of the executed code will appear in the result view.