CustomComponent
This guide demonstrates how to use the CustomComponent.
CustomComponent Properties
| Name | Type | Default | Description |
|---|---|---|---|
| Name | string | ‘customComponent’ + index suffix | Unique name of the Card. |
| Source | string | null | Page name or component class name. |
| Attributes | array | empty | Custom component attributes. |
Use application Page for component source
Using CustomComponent you can turn any page to a reusable component:
- Create new page with name PageTitle and exclude it from navigation.
- Add Load event in PageTitle page and initialize Text property from Attributes.
- Set PageTitle Heading component Text property to Text property from previous step.
- Create new page with name MainPage, set it as start page, add it to navigation and remove default Heading component.
- Add new CustomComponent to MainPage, set Source property to PageTitle and add Text attribute.
- Run the application.
Use custom component class name for component source
1. Add a new .razor file in the server/Shared directory of your Radzen application e.g. CustomComponent.razor.
2. Implement the component. For this example it will be a button with one [Parameter] property Title and event Click.
<button type="button" @onclick="@((args) => OnClick(args))">
@if (!string.IsNullOrEmpty(Title))
{
<span class="ui-button-text">@Title</span>
}
</button>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public EventCallback<MouseEventArgs> Click { get; set; }
void OnClick(MouseEventArgs args)
{
Click.InvokeAsync(args);
}
}
3. Add new CustomComponent to MainPage, set Source property to CustomComponent and add Title attribute.
4. Open the MainPage.razor.cs file that Radzen has generated for your page to add the CustomComponentClick event handler. Radzen generates that file only once and will not overwrite it.Add the event handler implementation. Add CustomComponentClick as attribute.
using System;
using System.Linq;
using System.Collections.Generic;
using System.Threading.Tasks;
using Radzen;
using Radzen.Blazor;
using Microsoft.AspNetCore.Components.Web;
namespace SampleBlazor.Pages
{
public partial class MainPageComponent
{
protected void CustomComponentClick(MouseEventArgs args)
{
Console.WriteLine("Custom component clicked!");
}
}
}
5. Run the application.
