MatBlazor version 1.0.0
I introduce new version of MatBlazor - v1.0.0.
Last time I have implemented ExpansionPanel, Tooltip, Floating Action Button, Themes, DatePicker and etc…
For this moment I have implemented most of all components, that I have planed for version 1.0.0
. And we have done this!
Support .NET Core 3.0 Preview 5 SDK.
Now, we have a lot of components
- AppBar
- Autocomplete
- Button
- Card
- Checkbox
- Chip
- DatePicker
- Dialog
- Divider
- Drawer
- Elevation
- Expansion Panel (Accordion)
- FAB (floating action button)
- Icon
- IconButton
- LayoutGrid
- List
- Menu
- ProgressBar
- RadioButton
- Ripple
- Select
- Slider
- SlideToggle
- Snackbar
- Tab
- Table
- TextField
- Themes
- Tooltip
- Typography
Of course we make a lot of new components and improvements.
Forwarding Refs in Blazor
ForwardRef is a technique for automatically passing a ElementRef through a component to one of its children or back from children to parent or among independent components. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below.
Capture references to elements
From Blazor documentation we know that you can capture references to HTML elements in a component using the following approach:
- Add a
ref
attribute to the HTML element. - Define a field of type
ElementRef
whose name matches the value of theref
attribute. The following example shows capturing a reference to theusername
<input>
element:
<input ref="username" ... />
@functions {
ElementRef username;
}
Problematics
Problem in passing a ElementRef to its children or another component
If you try to pass the ElementRef
to another component (children or neighbor), it will not work.
Because ref
returns the value at the Render moment after the parameters have been applied.
The value can be applied after the following StateHasChanged()
.
<MyTooltipComponent targetRef="@username"></MyTooltipComponent>
<input ref="username" ... />
@functions {
ElementRef username;
}
Problem in passing a child ElementRef to its parent in Blazor
The same problem is reproduced when you need to get the ElementRef from the ChildContent, especially when ChildContent is not an HTML Element, but Blazor Component.
<MyTooltipComponent Tooltip="My tooltip for h1 element">
<h1></h1>
</MyTooltipComponent>
<MyTooltipComponent Tooltip="My tooltip for MatBlazor Button">
<MatButton>Click me</MatButton>
</MyTooltipComponent>
Solution ForwardRef
The solution is to create a store for the ElementRef and pass this as parameter to all components.
public class ForwardRef
{
private ElementRef _current;
public ElementRef Current
{
get => _current;
set => Set(value);
}
public void Set(ElementRef value)
{
_current = value;
}
}
Solution for passing a ElementRef to its children or another component
When the current component wants to pass its ElementRef
and pass it on to others, you should create ForwardRef instance and pass it to others components in parameters.
Index.razor
<MyTooltipComponent targetForwardRef="@usernameForwardRef" Tooltip="My tooltip"></MyTooltipComponent>
<input ref="usernameForwardRef.Current" ... />
@functions {
ForwardRef usernameForwardRef = new ForwardRef();
}
MyTooltipComponent.razor
<div class="my-tooltip">@Tooltip</div>
@functions {
[Parameter]
protected ForwardRef TargetForwardRef {get;set;}
[Parameter]
protected string Tooltip {get;set;}
protected override async Task OnAfterRenderAsync()
{
// TargetForwardRef.Current will contain reference to target ElementRef
await js.InvokeAsync<object>("initTooltip", TargetForwardRef.Current);
}
}
Solution in passing a child ElementRef to its parent in Blazor
If you want to get a reference to a ElementRef
of child, you should pass the ForwardRef
to the child in which the child returns ElementRef
to itself.
MyTooltipComponent.razor
@ChildContent(TargetForwardRef)
<div class="my-tooltip">@Tooltip</div>
@functions {
private ForwardRef TargetForwardRef {get;set;} = new ForwardRef();
[Parameter]
protected string Tooltip {get;set;}
[Parameter]
protected RenderFragment<ForwardRef> ChildContent {get;set;}
protected override async Task OnAfterRenderAsync()
{
// TargetForwardRef.Current will contain reference to target ElementRef
await js.InvokeAsync<object>("initTooltip", TargetForwardRef.Current);
}
}
To obtain a ElementRef
to the Html Element.
Index.razor
<MyTooltipComponent Tooltip="My tooltip">
<input ref="@context.Current" ... />
</MyTooltipComponent>
To obtain a ElementRef
to the Custom Blazor Component your component should get ForwardRef
as a parameter.
MyCustomComponent.razor
<MyCustomComponent>
<input ref="ForwardRef.Current" ... />
</MyTooltipComponent>
@functions {
[Parameter]
protected ForwardRef RefBack {get;set;}
protected ElementRef Ref
{
set
{
RefBack?.Set(value);
}
}
}
Index.razor
<MyTooltipComponent Tooltip="My tooltip">
<MyCustomComponent RefBack="@context" />
</MyTooltipComponent>
Summary
In my opinion, this is one of the best ElementRef
transfer techniques among the components.
Of course, in the class, you can add events with subscription and unsubscribe, and much more, for example Observable.
That I used in the development of the MatBlazor components for Tooltip and Menu.
MatBlazor 0.9.8 - Material Design components for Blazor and Razor Components
I introduce new version of MatBlazor v0.9.8.
Support .NET Core 3.0 Preview 4 SDK!
We make a lot of new components and in the near future many new components will be created.
I want to say a big thank you to everyone who took part in the creation.
MatBlazor 0.6.1 - Material Design components for Blazor and Razor Components
I introduce new version of MatBlazor v0.6.1.
Support both of Blazor 0.9 and Razor Components!
And also I have started new sprint to develop new components for MatBlazor. Soon there will be many new components.
C# and Blazor Compilation inside Browser
Introduction
If you are a web developer and are developing for a browser, then you are sure know JS, which can be executed inside a browser. There is an opinion that JS is not very suitable for complex calculations and algorithms. And although in recent years JS has made a big breakthrough in performance and wide of use, many developers continue to dream of launching a system language inside the browser. In the near future, the game may change thanks to WebAssembly.
Microsoft is not standing on place and actively trying to port .NET to WebAssembly. As one of the results, we received a new framework for client-side development - Blazor. It is not quite clear yet whether Blazor can be faster than modern JS frameworks like React, Angular, Vue due to WebAssembly. But it definitely has a big advantage - development in C # as well as the whole .NET Core world can be used inside the application.