« Blazor component » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| Ligne 91 : | Ligne 91 : | ||
<filebox fn='Components/MyComponent.razor.cs'> | <filebox fn='Components/MyComponent.razor.cs'> | ||
// match between the cascading value and the cascading parameter is made by the type (string) and not by the property name | |||
[CascadingParameter] | [CascadingParameter] | ||
public string BtnStyle { get; set; } | public string BtnStyle { get; set; } | ||
</filebox> | </filebox> | ||
Version du 25 juillet 2021 à 15:44
Basic component
| Components/MyComponent.razor |
<h1>Test</h1> <p>@ChildContent</p> |
| Components/MyComponent.razor.cs |
public partial class MyComponent : ComponentBase
{
[Parameter]
public RenderFragment ChildContent { get; set; }
}
|
| Components/MyComponent.razor.css |
h1 {
color: coral;
}
|
| Pages/Index.razor |
@page "/"
@using Component.Components
<MyComponent>
test !!!
</MyComponent>
|
Callback event
| Components/MyComponent.razor.cs |
[Parameter]
public EventCallback<string> Callback { get; set; }
private string description;
private async Task UpdateDescription()
{
await Callback.InvokeAsync(description);
}
|
| Pages/Index.razor |
<MyComponent Callback="MyComponentCallback" />
@code {
void MyComponentCallback(string description)
{
}
}
|
Binding with component parameters
| Components/MyComponent.razor.cs |
[Parameter]
public string Description { get; set; }
// name of the EventCallback has to be [PropertyName]Changed
[Parameter]
public EventCallback<string> DescriptionChanged { get; set; }
private async Task UpdateDescription()
{
await DescriptionChanged.InvokeAsync(description);
}
|
| Pages/Index.razor |
@* two ways binding of the component parameter Description with the local field description *@
<MyComponent @bind-Description="description" />
@code {
private string description = "Text";
}
|
Cascading values and parameters
Set a value for the component hierarchy from an ancestor component to any number of descendent components.
| Pages/Index.razor |
@* BtnStyle will be available in MyComponent and all its descendent components *@
<CascadingValue Value="BtnStyle">
<MyComponent />
</CascadingValue>
@code {
string BtnStyle = "btn-success";
}
|
| Components/MyComponent.razor.cs |
// match between the cascading value and the cascading parameter is made by the type (string) and not by the property name
[CascadingParameter]
public string BtnStyle { get; set; }
|
