Getting Started with Blazor Playground

29 Nov 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 and Syncfusion.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.