HxOffcanvas
Bootstrap Offcanvas component (aka Drawer).
Similar to modals, only one offcanvas can be shown at a time.
(We hide the current offcanvas if you open a new one.)
(We hide the current offcanvas if you open a new one.)
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 |