« Blazor component » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 81 : | Ligne 81 : | ||
<filebox fn='Pages/Index.razor'> | <filebox fn='Pages/Index.razor'> | ||
@* BtnStyle will be available in MyComponent and all its descendent components *@ | @* BtnStyle will be available in MyComponent and all its descendent components *@ | ||
<CascadingValue Value=" | <CascadingValue Value="btnStyle"> | ||
<MyComponent /> | <MyComponent /> | ||
</CascadingValue> | </CascadingValue> | ||
@code { | @code { | ||
string | string btnStyle = "btn-success"; | ||
} | } | ||
</filebox> | </filebox> |
Version du 25 juillet 2021 à 15:45
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; } |