HxOffcanvas #

Bootstrap Offcanvas component (aka Drawer).

Basic usage #

<HxOffcanvas @ref="offcanvasComponent" Title="Title">
	<BodyTemplate>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.</p>
		<p>Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.</p>
		<p>Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.</p>
		<p>Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.</p>
		<p>Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.</p>
	</BodyTemplate>
	<FooterTemplate>
		<HxButton OnClick="HandleHide" Text="Close" Color="ThemeColor.Secondary" />
	</FooterTemplate>
</HxOffcanvas>

<HxButton OnClick="HandleShow" Text="Show" Color="ThemeColor.Primary" />

@code
{
	private HxOffcanvas offcanvasComponent;

	private async Task HandleShow()
	{
		await offcanvasComponent.ShowAsync();
	}

	private async Task HandleHide()
	{
		await offcanvasComponent.HideAsync();
	}
}

Custom close-button icon #

Placement #

Choose the placement of the Offcanvas by setting the Placement parameter.

Backdrop #

By default, the backdrop is enabled (OffcanvasBackdrop.True). You can disable it with Backdrop="OffcanvasBackdrop.False".

Static backdrop #

When the backdrop is set to OffcanvasBackdrop.Static, the offcanvas will not close when clicking outside of it.

Responsive #

When a value is supplied to the ResponsiveBreakpoint parameter, the content is displayed using the offcanvas when below the selected breakpoint.

Title

This is offcanvas body.
It is displayed using the offcanvas when below the selected breakpoint (otherwise in-place).
Resize your browser to see the responsive offcanvas behavior.

Size #

Set the size of the HxOffcanvas with the Size parameter. The default value is OffcanvasSize.Regular.

API #

Parameters #

Name Type Description
Backdrop OffcanvasBackdrop? Indicates whether to apply a backdrop on the body while the offcanvas is open. If set to OffcanvasBackdrop.Static, the offcanvas cannot be closed by clicking on the backdrop. The default value (from Defaults) is OffcanvasBackdrop.True.
BodyCssClass string Additional body CSS class.
BodyTemplate RenderFragment Body content.
CloseButtonIcon IconBase The close icon to be used in the header. If set to null, the Bootstrap default close button will be used.
CloseOnEscape bool? Indicates whether the offcanvas closes when the escape key is pressed. The default value is true.
CssClass string Offcanvas additional CSS class. Added to root div (.offcanvas).
FooterCssClass string Additional footer CSS class.
FooterTemplate RenderFragment Footer content.
HeaderCssClass string Additional header CSS class.
HeaderTemplate RenderFragment Content for the header. (Is rendered directly into offcanvas-header - in contrast to Title which is rendered into <h5 class="offcanvas-title">).
Placement OffcanvasPlacement? Placement of the offcanvas. The default is OffcanvasPlacement.End (right).
RenderMode OffcanvasRenderMode Determines whether the content is always rendered or only if the offcanvas is open.
The default is OffcanvasRenderMode.OpenOnly.
Please note, this setting applies only when OffcanvasResponsiveBreakpoint.None is set. For all other values, the content is always rendered (to be available for the mobile version).
ResponsiveBreakpoint OffcanvasResponsiveBreakpoint? Breakpoint below which the contents are rendered outside the viewport in an offcanvas (above this breakpoint, the offcanvas body is rendered inside the viewport).
ScrollingEnabled bool? Indicates whether body (page) scrolling is allowed while the offcanvas is open. The default value (from Defaults) is false.
Settings OffcanvasSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
ShowCloseButton bool? Indicates whether the modal shows a close button in the header. The default value is true. Use CloseButtonIcon to change the shape of the button.
Size OffcanvasSize? Size of the offcanvas. The default is OffcanvasSize.Regular.
Title string Text for the title in the header. (Is rendered into <h5 class="offcanvas-title"> - in contrast to HeaderTemplate which is rendered directly into offcanvas-header).

Event callbacks #

Name Type Description
OnClosed EventCallback This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).
OnShown EventCallback This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).

Methods #

Method Returns Description
HideAsync() Task Hides the offcanvas (if opened).
ShowAsync() Task Shows the offcanvas.

Static properties #

Property Type Description
Defaults OffcanvasSettings Application-wide defaults for the HxOffcanvas and derived components.

CSS variables #

Name Description Default
--hx-offcanvas-close-icon-font-size Offcanvas close icon font size. 2rem
--hx-offcanvas-footer-padding-x Horizontal padding of the footer. 1rem
--hx-offcanvas-footer-padding-y Vertical padding of the footer. 1rem
--hx-offcanvas-horizontal-width-sm Horizontal width on a small screen size. 400px
--hx-offcanvas-horizontal-width-lg Horizontal width on a large screen size. 600px
An unhandled error has occurred. Reload 🗙