Blazor Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.
NOTE
Similar to modals, only one offcanvas can be shown at a time.
Examples #
Dynamic component as offcanvas #
Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.
If dynamically-rendered components have component parameters, pass them as an
IDictionary. The string is the parameter's name, and the object is the parameter's value.
<Offcanvas @ref="offcanvas" />
<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>
@code {
private Offcanvas offcanvas = default!;
private async Task ShowEmployeeComponent()
{
var parameters = new Dictionary<string, object>();
parameters.Add("EmployeeId", 321);
await offcanvas.ShowAsync<EmployeeDemoComponent1>(title: "Employee Details", parameters: parameters);
}
}<div class="row">
<div class="col-5 col-md-4 text-end">Employee Id :</div>
<div class="col-7 col-md-8">@EmployeeId</div>
</div>
<div class="row">
<div class="col-5 col-md-4 text-end">First Name :</div>
<div class="col-7 col-md-8">@employee.FirstName</div>
</div>
<div class="row">
<div class="col-5 col-md-4 text-end">Last Name :</div>
<div class="col-7 col-md-8">@employee.LastName</div>
</div>
@code {
private Employee employee = default!;
[Parameter] public int EmployeeId { get; set; }
protected override void OnInitialized()
{
// get employee with {EmployeeId} from DB
employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };
base.OnInitialized();
}
}Pass event callbacks to a dynamic component #
Event callbacks
(EventCallback) can be passed in its parameter dictionary.
In the following parent component example, the
ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered.
The parent component passes the callback method, ShowDTMessage in the parameter dictionary:
- The
stringkey is the callback method's name,OnClickCallback. - The
objectvalue is created byEventCallbackFactory.Createfor the parent callback method,ShowDTMessage.
<Offcanvas @ref="offcanvas" />
<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>
<div class="mt-3 bg-success text-white bg-opacity-75">
@message
</div>
@code {
private Offcanvas offcanvas = default!;
private string? message;
private async Task ShowEmployeeComponent()
{
var parameters = new Dictionary<string, object>();
parameters.Add("EmployeeId", 322);
parameters.Add("OnclickCallback", EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage));
await offcanvas.ShowAsync<EmployeeDemoComponent2>(title: "Employee Details", parameters: parameters);
}
private void ShowDTMessage(MouseEventArgs e) => message = $"The current date time is: {DateTime.Now}.";
}<div class="row">
<div class="col-5 col-md-4 text-end">Employee Id :</div>
<div class="col-7 col-md-8">@EmployeeId</div>
</div>
<div class="row">
<div class="col-5 col-md-4 text-end">First Name :</div>
<div class="col-7 col-md-8">@employee.FirstName</div>
</div>
<div class="row">
<div class="col-5 col-md-4 text-end">Last Name :</div>
<div class="col-7 col-md-8">@employee.LastName</div>
</div>
<Button class="mt-3" Color="ButtonColor.Success" Type="ButtonType.Button" @onclick="OnClickCallback">
Trigger a Parent component method
</Button>
@code {
private Employee employee = default!;
[Parameter] public int EmployeeId { get; set; }
[Parameter] public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
protected override void OnInitialized()
{
// get employee with {EmployeeId} from DB
employee = new Employee { FirstName = "Sagar", LastName = "Reddy" };
base.OnInitialized();
}
}Placement #
Try the top, bottom, and left examples out below.
NOTE
Default placement for the offcanvas component is right.
Static backdrop #
When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.
Sizes #
Set the size of the
Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.Events #
Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
