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.)
Usage
#
Placement
#
Choose the placement of the Offcanvas by setting the Placement
parameter.
End (right)
Start (left)
Top
Bottom
Backdrop
#
By default the backdrop is enabled, you can disable it with BackdropEnabled="false"
.
Open with disabled backdrop
Size
#
Set the size of the HxOffcanvas
with the Size
parameter. The default value is OffcanvasSize.Regular
.
Large offcanvas
Regular offcanvas
Small offcanvas
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 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