HxOffcanvas

Bootstrap Offcanvas component (aka Drawer).

Usage #

IsOpen: False

Custom close-button icon #

Placement #

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

Backdrop #

By default the backdrop is enabled, you can disable it with BackdropEnabled="false".

Size #

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

API

Parameters

Name Type Description
BackdropEnabled bool? Indicates whether to apply a backdrop on body while offcanvas is open. Default value (from HxOffcanvas.Defaults) is true.
BodyCssClass string Additional body CSS class.
BodyTemplate RenderFragment Body content.
CloseButtonIcon IconBase Close icon to be used in header. If set to null, Bootstrap default close-button will be used.
CloseOnEscape bool? Indicates whether the offcanvas closes when escape key is pressed. 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 opposite to Title which is rendered into <h5 class="offcanvas-title">).
Placement OffcanvasPlacement? Placement of the offcanvas. Default is OffcanvasPlacement.End (right).
RenderMode OffcanvasRenderMode Determines whether the content is always rendered or only if the offcanvas is open. Default is OffcanvasRenderMode.OpenOnly.
ScrollingEnabled bool? Indicates whether body (page) scrolling is allowed while offcanvas is open. Default value (from HxOffcanvas.Defaults) is false.
Settings OffcanvasSettings Set of settings to be applied to the component instance (overrides HxOffcanvas.Defaults, overriden by individual parameters).
ShowCloseButton bool? Indicates whether the modal shows close button in header. Default value is true. Use CloseButtonIcon to change shape of the button.
Size OffcanvasSize? Size of the offcanvas. Default is OffcanvasSize.Regular.
Title string Text for the title in header. (Is rendered into <h5 class="offcanvas-title"> - in opposite 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 🗙